diff --git "a/frontend/src/pages/Repository.jsx" "b/frontend/src/pages/Repository.jsx"
--- "a/frontend/src/pages/Repository.jsx"
+++ "b/frontend/src/pages/Repository.jsx"
@@ -1,1169 +1,1257 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  Upload, 
-  FolderOpen, 
-  Image, 
-  FileText, 
-  Video, 
-  Search,
-  Filter,
-  Grid3X3,
-  List,
-  MoreVertical,
-  Download,
-  Trash2,
-  Eye,
-  ChevronDown,
-  ChevronRight,
-  Plus,
-  X,
-  Check,
-  File,
-  Copy
-} from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Checkbox } from '@/components/ui/checkbox';
-
-const products = [
-  {
-    id: 'ocr',
-    name: 'Intelligent Document Parsing (OCR)',
-    shortName: 'OCR',
-    color: 'blue',
-    subCategories: []
-  },
-  {
-    id: 'p2p',
-    name: 'Purchase To Pay (P2P)',
-    shortName: 'P2P',
-    color: 'emerald',
-    subCategories: [
-      'Budget Approval Workflow',
-      'Purchase Request Workflow',
-      'Accounts Payable Workflow'
-    ]
-  },
-  {
-    id: 'o2c',
-    name: 'Order to Cash (O2C)',
-    shortName: 'O2C',
-    color: 'violet',
-    subCategories: [
-      'Quotation Workflow',
-      'Sales Order Workflow',
-      'PickSlip Delivery Workflow',
-      'Accounts Receivable Workflow'
-    ]
-  }
-];
-
-const mockAssets = [
-  { id: '1', name: 'OCR_Demo_Screenshot.png', type: 'image', product: 'ocr', subCategory: null, size: '2.4 MB', date: '2024-12-20' },
-  { id: '2', name: 'P2P_Workflow_Diagram.pdf', type: 'document', product: 'p2p', subCategory: 'Budget Approval Workflow', size: '1.8 MB', date: '2024-12-19' },
-  { id: '3', name: 'Invoice_Processing_Video.mp4', type: 'video', product: 'ocr', subCategory: null, size: '45.2 MB', date: '2024-12-18' },
-  { id: '4', name: 'Sales_Order_Infographic.png', type: 'image', product: 'o2c', subCategory: 'Sales Order Workflow', size: '3.1 MB', date: '2024-12-17' },
-  { id: '5', name: 'AP_Automation_Brochure.pdf', type: 'document', product: 'p2p', subCategory: 'Accounts Payable Workflow', size: '5.6 MB', date: '2024-12-16' },
-  { id: '6', name: 'O2C_Product_Banner.png', type: 'image', product: 'o2c', subCategory: 'Quotation Workflow', size: '1.2 MB', date: '2024-12-15' },
-  { id: '7', name: 'Document_Parsing_Demo.png', type: 'image', product: 'ocr', subCategory: null, size: '890 KB', date: '2024-12-14' },
-  { id: '8', name: 'PR_Workflow_Guide.pdf', type: 'document', product: 'p2p', subCategory: 'Purchase Request Workflow', size: '2.3 MB', date: '2024-12-13' },
-];
-
-export default function Repository() {
-  const [viewMode, setViewMode] = useState('grid');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedProduct, setSelectedProduct] = useState('all');
-  const [expandedProducts, setExpandedProducts] = useState(['ocr', 'p2p', 'o2c']);
-  const [selectedAssets, setSelectedAssets] = useState([]);
-  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
-  const [dragOver, setDragOver] = useState(false);
-  const [selectedFiles, setSelectedFiles] = useState([]);
-  const [uploadProductCategory, setUploadProductCategory] = useState('');
-  const [uploadSubCategory, setUploadSubCategory] = useState('');
-  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 [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) => {
-    setExpandedProducts(prev => 
-      prev.includes(productId) 
-        ? prev.filter(id => id !== productId)
-        : [...prev, productId]
-    );
-  };
-
-  const filteredAssets = assets.filter(asset => {
-    const matchesSearch = asset.name.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesProduct = selectedProduct === 'all' || asset.product === selectedProduct;
-    return matchesSearch && matchesProduct;
-  });
-
-  const getAssetsByProduct = (productId) => {
-    return assets.filter(asset => asset.product === productId);
-  };
-
-  const getTypeIcon = (type) => {
-    switch(type) {
-      case 'image': return <Image className="w-5 h-5 text-pink-500" />;
-      case 'video': return <Video className="w-5 h-5 text-red-500" />;
-      case 'document': return <FileText className="w-5 h-5 text-blue-500" />;
-      default: return <File className="w-5 h-5 text-slate-500" />;
-    }
-  };
-
-  const getProductColor = (productId) => {
-    const product = products.find(p => p.id === productId);
-    return product?.color || 'slate';
-  };
-
-  // Fetch assets from API
-  const fetchAssets = async () => {
-    setIsLoadingAssets(true);
-    try {
-      const response = await fetch('/api/assets');
-      if (response.ok) {
-        const data = await response.json();
-        // Convert API response to match mockAssets format
-        // IMPORTANT: Keep IDs as strings to preserve precision for large CockroachDB IDs
-        const formattedAssets = data.map(asset => ({
-          id: String(asset.id),  // Explicitly convert to string to preserve precision
-          name: asset.name,
-          type: asset.file_type,
-          product: asset.product_category,
-          subCategory: asset.sub_category,
-          size: formatFileSize(asset.size),
-          date: asset.created_at ? new Date(asset.created_at).toISOString().split('T')[0] : new Date().toISOString().split('T')[0]
-        }));
-        setAssets(formattedAssets);
-      } else {
-        console.error('Failed to fetch assets');
-        // Keep mockAssets on error
-      }
-    } catch (error) {
-      console.error('Error fetching assets:', error);
-      // Keep mockAssets on error
-    } finally {
-      setIsLoadingAssets(false);
-    }
-  };
-
-  // Format file size
-  const formatFileSize = (bytes) => {
-    if (!bytes) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
-  };
-
-  // Handle delete asset
-  const handleDeleteAsset = async (assetId) => {
-    setIsDeleting(true);
-    try {
-      // Ensure assetId is a string to preserve precision
-      const assetIdStr = String(assetId);
-      const response = await fetch(`/api/assets/${assetIdStr}`, {
-        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 {
-      // Ensure assetId is a string to preserve precision
-      const assetIdStr = String(assetId);
-      const response = await fetch(`/api/assets/${assetIdStr}/pdf-pages`);
-      if (response.ok) {
-        const data = await response.json();
-        setPdfPages(data);
-      } else {
-        const errorData = await response.json().catch(() => ({ detail: 'Failed to load PDF' }));
-        console.error('Failed to load PDF pages:', errorData);
-        // Store error message for display
-        setPdfPages({ error: errorData.detail || 'Failed to load PDF preview' });
-      }
-    } catch (error) {
-      console.error('Error loading PDF pages:', error);
-      setPdfPages({ error: error.message || 'Failed to load PDF preview' });
-    } finally {
-      setIsLoadingPdf(false);
-    }
-  };
-
-  // Fetch assets on component mount and when upload dialog closes
-  useEffect(() => {
-    fetchAssets();
-  }, []);
-
-  // Refresh assets after successful upload
-  useEffect(() => {
-    if (!uploadDialogOpen && !isUploading) {
-      fetchAssets();
-    }
-  }, [uploadDialogOpen, isUploading]);
-
-  const handleFileSelect = (files) => {
-    const fileArray = Array.from(files);
-    setSelectedFiles(fileArray);
-  };
-
-  const handleDragDrop = (e) => {
-    e.preventDefault();
-    setDragOver(false);
-    if (e.dataTransfer.files) {
-      handleFileSelect(e.dataTransfer.files);
-    }
-  };
-
-  const handleFileInputChange = (e) => {
-    if (e.target.files) {
-      handleFileSelect(e.target.files);
-    }
-  };
-
-  const pollAssetStatus = async (assetId, fileName) => {
-    const maxAttempts = 60; // Poll for up to 60 seconds
-    let attempts = 0;
-    let consecutive404s = 0;
-    const max404s = 5; // Allow up to 5 consecutive 404s (asset might not be visible yet)
-    
-    // Small delay before first poll to allow database commit
-    await new Promise(resolve => setTimeout(resolve, 500));
-    
-    while (attempts < maxAttempts) {
-      try {
-        const response = await fetch(`/api/assets/${assetId}/status`);
-        if (response.ok) {
-          const status = await response.json();
-          consecutive404s = 0; // Reset 404 counter on success
-          setUploadProgress(prev => ({
-            ...prev,
-            [fileName]: {
-              status: status.status,
-              message: getStatusMessage(status.status),
-              extractedContent: status.extracted_content || null  // Store extracted JSON
-            }
-          }));
-          
-          if (status.status === 'completed' || status.status === 'failed') {
-            break;
-          }
-        } else if (response.status === 404) {
-          consecutive404s++;
-          // If we get too many 404s, stop polling (asset might not exist)
-          if (consecutive404s >= max404s) {
-            console.warn(`Asset ${assetId} not found after ${max404s} attempts`);
-            setUploadProgress(prev => ({
-              ...prev,
-              [fileName]: {
-                status: 'pending',
-                message: 'Asset status unavailable'
-              }
-            }));
-            break;
-          }
-          // For first few 404s, keep trying (might be replication lag)
-        } else {
-          // Other errors - log but keep trying
-          console.error(`Status check failed: ${response.status}`);
-        }
-      } catch (error) {
-        console.error('Error polling status:', error);
-        // On network errors, keep trying
-      }
-      
-      await new Promise(resolve => setTimeout(resolve, 1000)); // Poll every second
-      attempts++;
-    }
-  };
-
-  const getStatusMessage = (status) => {
-    switch(status) {
-      case 'pending': return 'Uploading file...';
-      case 'processing': return 'Extracting content with OCR...';
-      case 'completed': return 'Content extracted and indexed by AI agent ✓';
-      case 'failed': return 'Analysis failed';
-      default: return 'Processing...';
-    }
-  };
-
-  const handleUpload = async () => {
-    if (selectedFiles.length === 0) {
-      alert('Please select at least one file to upload');
-      return;
-    }
-    if (!uploadProductCategory) {
-      alert('Please select a product category');
-      return;
-    }
-
-    setIsUploading(true);
-    setUploadProgress({});
-    
-    try {
-      // Initialize progress for all files
-      const initialProgress = {};
-      selectedFiles.forEach(file => {
-        initialProgress[file.name] = {
-          status: 'pending',
-          message: 'Uploading file...'
-        };
-      });
-      setUploadProgress(initialProgress);
-
-      // Upload files sequentially to show progress
-      const results = [];
-      for (const file of selectedFiles) {
-        try {
-          setUploadProgress(prev => ({
-            ...prev,
-            [file.name]: {
-              status: 'pending',
-              message: 'Uploading file...'
-            }
-          }));
-
-          const formData = new FormData();
-          formData.append('file', file);
-          formData.append('product_category', uploadProductCategory);
-          if (uploadSubCategory && uploadSubCategory !== 'none') {
-            formData.append('sub_category', uploadSubCategory);
-          }
-
-          const response = await fetch('/api/assets/upload', {
-            method: 'POST',
-            body: formData,
-          });
-
-          if (!response.ok) {
-            const errorData = await response.json().catch(() => ({ detail: 'Upload failed' }));
-            throw new Error(errorData.detail || `Upload failed for ${file.name}`);
-          }
-
-          const result = await response.json();
-          results.push(result);
-
-          // Ensure ID is kept as string to preserve precision
-          const assetId = String(result.id);
-
-          // Update progress - file uploaded, now analyzing
-          setUploadProgress(prev => ({
-            ...prev,
-            [file.name]: {
-              status: result.analysis_status || 'processing',
-              message: result.analysis_status === 'processing' 
-                ? 'Extracting content with OCR...' 
-                : 'Upload complete, analyzing...'
-            }
-          }));
-
-          // Start polling for analysis status if it's a document/image
-          if (result.file_type === 'document' || result.file_type === 'image') {
-            pollAssetStatus(assetId, file.name);
-          } else {
-            setUploadProgress(prev => ({
-              ...prev,
-              [file.name]: {
-                status: 'completed',
-                message: 'Upload complete ✓'
-              }
-            }));
-          }
-        } catch (error) {
-          console.error(`Upload error for ${file.name}:`, error);
-          setUploadProgress(prev => ({
-            ...prev,
-            [file.name]: {
-              status: 'failed',
-              message: `Upload failed: ${error.message}`
-            }
-          }));
-        }
-      }
-      
-      console.log('Upload results:', results);
-      
-      // Wait a bit for analysis to complete, then refresh
-      setTimeout(async () => {
-        await fetchAssets();
-      }, 2000);
-      
-      // Don't close dialog immediately - let user see the progress
-      // Reset form after a delay
-      setTimeout(() => {
-        setSelectedFiles([]);
-        setUploadProductCategory('');
-        setUploadSubCategory('');
-        setUploadProgress({});
-        setUploadDialogOpen(false);
-      }, 3000);
-      
-    } catch (error) {
-      console.error('Upload error:', error);
-      alert(`Upload failed: ${error.message}`);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Header */}
-        <motion.div 
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-            <div>
-              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
-                Asset Repository
-              </h1>
-              <p className="text-slate-500 mt-1">
-                Manage your marketing materials, screenshots, and documents
-              </p>
-            </div>
-            <Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>
-              <DialogTrigger asChild>
-                <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
-                  <Upload className="w-4 h-4" />
-                  Upload Assets
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-lg">
-                <DialogHeader>
-                  <DialogTitle>Upload Assets</DialogTitle>
-                </DialogHeader>
-                <div className="space-y-4 pt-4">
-                  <input
-                    type="file"
-                    ref={fileInputRef}
-                    onChange={handleFileInputChange}
-                    multiple
-                    className="hidden"
-                    accept="image/*,video/*,.pdf,.doc,.docx"
-                  />
-                  <div 
-                    className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
-                      dragOver ? 'border-blue-500 bg-blue-50' : 'border-slate-200 hover:border-slate-300'
-                    }`}
-                    onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
-                    onDragLeave={() => setDragOver(false)}
-                    onDrop={handleDragDrop}
-                    onClick={() => fileInputRef.current?.click()}
-                  >
-                    <Upload className="w-10 h-10 text-slate-400 mx-auto mb-3" />
-                    <p className="text-sm font-medium text-slate-700">
-                      Drag and drop files here
-                    </p>
-                    <p className="text-xs text-slate-500 mt-1">
-                      or click to browse
-                    </p>
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      className="mt-4"
-                      type="button"
-                      onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}
-                    >
-                      Browse Files
-                    </Button>
-                    {selectedFiles.length > 0 && (
-                      <div className="mt-4 space-y-3">
-                        <p className="text-xs font-medium text-slate-600">Selected files:</p>
-                        {selectedFiles.map((file, index) => {
-                          const progress = uploadProgress[file.name];
-                          const getProgressValue = () => {
-                            if (!progress) return 0;
-                            switch(progress.status) {
-                              case 'pending': return 25;
-                              case 'processing': return 60;
-                              case 'completed': return 100;
-                              case 'failed': return 0;
-                              default: return 0;
-                            }
-                          };
-                          const getProgressColor = () => {
-                            if (!progress) return 'bg-blue-500';
-                            switch(progress.status) {
-                              case 'pending': return 'bg-blue-500';
-                              case 'processing': return 'bg-yellow-500';
-                              case 'completed': return 'bg-green-500';
-                              case 'failed': return 'bg-red-500';
-                              default: return 'bg-blue-500';
-                            }
-                          };
-                          return (
-                            <div key={index} className="space-y-2">
-                              <div className="flex items-center justify-between text-xs bg-slate-50 p-2 rounded">
-                                <span className="text-slate-700 truncate flex-1 mr-2">{file.name}</span>
-                                <span className="text-slate-500 whitespace-nowrap">{(file.size / 1024 / 1024).toFixed(2)} MB</span>
-                              </div>
-                              {isUploading && (
-                                <div className="space-y-1">
-                                  <div className="flex items-center justify-between text-xs">
-                                    <span className={`font-medium ${
-                                      progress?.status === 'completed' ? 'text-green-600' :
-                                      progress?.status === 'failed' ? 'text-red-600' :
-                                      progress?.status === 'processing' ? 'text-yellow-600' :
-                                      'text-blue-600'
-                                    }`}>
-                                      {progress?.message || 'Uploading...'}
-                                    </span>
-                                    {progress?.status === 'completed' && <Check className="w-3 h-3 text-green-600" />}
-                                    {progress?.status === 'failed' && <X className="w-3 h-3 text-red-600" />}
-                                  </div>
-                                  <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
-                                    <div 
-                                      className={`h-full transition-all ${getProgressColor()}`}
-                                      style={{ width: `${getProgressValue()}%` }}
-                                    />
-                                  </div>
-                                  {/* JSON Output Display */}
-                                  {progress?.status === 'completed' && progress?.extractedContent && (
-                                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
-                                      <div className="flex items-center justify-between mb-2">
-                                        <p className="text-xs font-medium text-slate-700">Extracted JSON Output:</p>
-                                        <Button
-                                          variant="ghost"
-                                          size="sm"
-                                          className="h-6 px-2 text-xs"
-                                          onClick={() => {
-                                            const jsonStr = JSON.stringify(progress.extractedContent, null, 2);
-                                            navigator.clipboard.writeText(jsonStr).then(() => {
-                                              alert('JSON copied to clipboard!');
-                                            }).catch(() => {
-                                              alert('Failed to copy JSON');
-                                            });
-                                          }}
-                                        >
-                                          <Copy className="w-3 h-3 mr-1" />
-                                          Copy
-                                        </Button>
-                                      </div>
-                                      <pre className="text-xs text-slate-600 bg-white p-2 rounded border border-slate-200 max-h-40 overflow-auto font-mono">
-                                        {JSON.stringify(progress.extractedContent, null, 2)}
-                                      </pre>
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                  
-                  <div className="space-y-3">
-                    <div>
-                      <Label>Product Category</Label>
-                      <Select value={uploadProductCategory} onValueChange={setUploadProductCategory}>
-                        <SelectTrigger className="mt-1.5">
-                          <SelectValue placeholder="Select a product" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {products.map(product => (
-                            <SelectItem key={product.id} value={product.id}>
-                              {product.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    
-                    <div>
-                      <Label>Sub-Category (Optional)</Label>
-                      <Select 
-                        value={uploadSubCategory} 
-                        onValueChange={setUploadSubCategory}
-                        disabled={!uploadProductCategory || products.find(p => p.id === uploadProductCategory)?.subCategories?.length === 0}
-                      >
-                        <SelectTrigger className="mt-1.5">
-                          <SelectValue placeholder="Select sub-category" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="none">None</SelectItem>
-                          {uploadProductCategory && products.find(p => p.id === uploadProductCategory)?.subCategories?.map((sub, idx) => (
-                            <SelectItem key={idx} value={sub}>{sub}</SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                  
-                  <div className="flex justify-end gap-2 pt-4">
-                    <Button 
-                      variant="outline" 
-                      onClick={() => {
-                        setUploadDialogOpen(false);
-                        setSelectedFiles([]);
-                        setUploadProductCategory('');
-                        setUploadSubCategory('');
-                      }}
-                      disabled={isUploading}
-                    >
-                      Cancel
-                    </Button>
-                    <Button 
-                      className="bg-blue-600 hover:bg-blue-700"
-                      onClick={handleUpload}
-                      disabled={isUploading || selectedFiles.length === 0 || !uploadProductCategory}
-                    >
-                      {isUploading ? 'Uploading...' : 'Upload'}
-                    </Button>
-                  </div>
-                </div>
-              </DialogContent>
-            </Dialog>
-          </div>
-        </motion.div>
-
-        <div className="grid lg:grid-cols-4 gap-6">
-          {/* Sidebar - Product Categories */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-            className="lg:col-span-1"
-          >
-            <Card className="border-0 shadow-lg shadow-slate-200/50 sticky top-8">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-semibold text-slate-600 uppercase tracking-wider">
-                  Product Categories
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="pt-0">
-                <div className="space-y-1">
-                  <button
-                    onClick={() => setSelectedProduct('all')}
-                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
-                      selectedProduct === 'all' 
-                        ? 'bg-blue-50 text-blue-700' 
-                        : 'hover:bg-slate-50 text-slate-700'
-                    }`}
-                  >
-                    <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}
-                    </Badge>
-                  </button>
-                  
-                  {products.map(product => (
-                    <div key={product.id}>
-                      <button
-                        onClick={() => {
-                          setSelectedProduct(product.id);
-                          if (product.subCategories.length > 0) {
-                            toggleProduct(product.id);
-                          }
-                        }}
-                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
-                          selectedProduct === product.id 
-                            ? `bg-${product.color}-50 text-${product.color}-700` 
-                            : 'hover:bg-slate-50 text-slate-700'
-                        }`}
-                      >
-                        {product.subCategories.length > 0 && (
-                          <ChevronRight className={`w-4 h-4 transition-transform ${
-                            expandedProducts.includes(product.id) ? 'rotate-90' : ''
-                          }`} />
-                        )}
-                        {product.subCategories.length === 0 && <div className="w-4" />}
-                        <span className="font-medium text-sm truncate">{product.shortName}</span>
-                        <Badge variant="secondary" className="ml-auto text-xs">
-                          {getAssetsByProduct(product.id).length}
-                        </Badge>
-                      </button>
-                      
-                      <AnimatePresence>
-                        {expandedProducts.includes(product.id) && product.subCategories.length > 0 && (
-                          <motion.div
-                            initial={{ height: 0, opacity: 0 }}
-                            animate={{ height: 'auto', opacity: 1 }}
-                            exit={{ height: 0, opacity: 0 }}
-                            className="overflow-hidden"
-                          >
-                            <div className="ml-7 pl-3 border-l border-slate-200 mt-1 space-y-1">
-                              {product.subCategories.map((sub, idx) => (
-                                <button
-                                  key={idx}
-                                  className="w-full text-left px-3 py-2 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
-                                >
-                                  {sub}
-                                </button>
-                              ))}
-                            </div>
-                          </motion.div>
-                        )}
-                      </AnimatePresence>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          </motion.div>
-
-          {/* Main Content */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="lg:col-span-3"
-          >
-            {/* Search and Filters */}
-            <Card className="border-0 shadow-lg shadow-slate-200/50 mb-6">
-              <CardContent className="p-4">
-                <div className="flex flex-col sm:flex-row gap-3">
-                  <div className="relative flex-1">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                    <Input
-                      placeholder="Search assets..."
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                      className="pl-10 border-slate-200"
-                    />
-                  </div>
-                  <div className="flex gap-2">
-                    <Select defaultValue="all">
-                      <SelectTrigger className="w-32 border-slate-200">
-                        <Filter className="w-4 h-4 mr-2" />
-                        <SelectValue placeholder="Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="all">All Types</SelectItem>
-                        <SelectItem value="image">Images</SelectItem>
-                        <SelectItem value="document">Documents</SelectItem>
-                        <SelectItem value="video">Videos</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <div className="flex border border-slate-200 rounded-lg overflow-hidden">
-                      <Button
-                        variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
-                        size="icon"
-                        onClick={() => setViewMode('grid')}
-                        className="rounded-none"
-                      >
-                        <Grid3X3 className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant={viewMode === 'list' ? 'secondary' : 'ghost'}
-                        size="icon"
-                        onClick={() => setViewMode('list')}
-                        className="rounded-none"
-                      >
-                        <List className="w-4 h-4" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Assets Grid/List */}
-            {viewMode === 'grid' ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
-                {filteredAssets.map((asset, index) => (
-                  <motion.div
-                    key={asset.id}
-                    initial={{ opacity: 0, scale: 0.95 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ delay: index * 0.05 }}
-                  >
-                    <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group overflow-hidden">
-                      <div className={`h-40 bg-gradient-to-br from-${getProductColor(asset.product)}-100 to-${getProductColor(asset.product)}-50 flex items-center justify-center relative`}>
-                        {asset.type === 'image' ? (
-                          <Image className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
-                        ) : asset.type === 'video' ? (
-                          <Video className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
-                        ) : (
-                          <FileText className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
-                        )}
-                        <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"
-                              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"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                window.open(`/api/assets/${String(asset.id)}/download`, '_blank');
-                              }}
-                            >
-                              <Download className="w-4 h-4" />
-                            </Button>
-                          </div>
-                        </div>
-                        <div className="absolute top-2 right-2">
-                          <Checkbox className="bg-white border-slate-300" />
-                        </div>
-                      </div>
-                      <CardContent className="p-4">
-                        <div className="flex items-start justify-between gap-2">
-                          <div className="min-w-0">
-                            <h3 className="font-medium text-slate-900 text-sm truncate">
-                              {asset.name}
-                            </h3>
-                            <p className="text-xs text-slate-500 mt-1">
-                              {asset.size} • {asset.date}
-                            </p>
-                          </div>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
-                                <MoreVertical className="w-4 h-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <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(String(asset.id));
-                                } else {
-                                  setPdfPages(null);
-                                }
-                              }}>
-                                <Eye className="w-4 h-4 mr-2" /> Preview
-                              </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => {
-                                window.open(`/api/assets/${String(asset.id)}/download`, '_blank');
-                              }}>
-                                <Download className="w-4 h-4 mr-2" /> Download
-                              </DropdownMenuItem>
-                              <DropdownMenuItem 
-                                className="text-red-600"
-                                onClick={async () => {
-                                  if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {
-                                    await handleDeleteAsset(String(asset.id));
-                                  }
-                                }}
-                              >
-                                <Trash2 className="w-4 h-4 mr-2" /> Delete
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                        <div className="flex gap-2 mt-3">
-                          <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700 bg-${getProductColor(asset.product)}-50`}>
-                            {products.find(p => p.id === asset.product)?.shortName}
-                          </Badge>
-                          {asset.subCategory && (
-                            <Badge variant="outline" className="text-xs border-slate-200 text-slate-600 truncate max-w-[120px]">
-                              {asset.subCategory}
-                            </Badge>
-                          )}
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </motion.div>
-                ))}
-              </div>
-            ) : (
-              <Card className="border-0 shadow-lg shadow-slate-200/50">
-                <CardContent className="p-0">
-                  <div className="divide-y divide-slate-100">
-                    {filteredAssets.map((asset, index) => (
-                      <motion.div
-                        key={asset.id}
-                        initial={{ opacity: 0, x: -10 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        transition={{ delay: index * 0.03 }}
-                        className="flex items-center gap-4 p-4 hover:bg-slate-50 transition-colors"
-                      >
-                        <Checkbox />
-                        <div className={`w-10 h-10 rounded-lg bg-${getProductColor(asset.product)}-100 flex items-center justify-center`}>
-                          {getTypeIcon(asset.type)}
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <h3 className="font-medium text-slate-900 text-sm truncate">
-                            {asset.name}
-                          </h3>
-                          <p className="text-xs text-slate-500 mt-0.5">
-                            {asset.subCategory || products.find(p => p.id === asset.product)?.name}
-                          </p>
-                        </div>
-                        <div className="hidden sm:block text-sm text-slate-500">
-                          {asset.size}
-                        </div>
-                        <div className="hidden md:block text-sm text-slate-500">
-                          {asset.date}
-                        </div>
-                        <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700`}>
-                          {products.find(p => p.id === asset.product)?.shortName}
-                        </Badge>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-8 w-8">
-                              <MoreVertical className="w-4 h-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                              <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(String(asset.id));
-                                } else {
-                                  setPdfPages(null);
-                                }
-                              }}>
-                                <Eye className="w-4 h-4 mr-2" /> Preview
-                              </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => {
-                                window.open(`/api/assets/${String(asset.id)}/download`, '_blank');
-                              }}>
-                                <Download className="w-4 h-4 mr-2" /> Download
-                              </DropdownMenuItem>
-                              <DropdownMenuItem 
-                                className="text-red-600"
-                                onClick={async () => {
-                                  if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {
-                                    await handleDeleteAsset(String(asset.id));
-                                  }
-                                }}
-                              >
-                              <Trash2 className="w-4 h-4 mr-2" /> Delete
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </motion.div>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-          </motion.div>
-        </div>
-      </div>
-
-      {/* Preview Dialog */}
-      <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 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(String(previewAsset.id));
-                    }
-                  }}
-                  disabled={isDeleting}
-                >
-                  <Trash2 className="w-4 h-4" />
-                </Button>
-              )}
-            </DialogTitle>
-          </DialogHeader>
-          <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"
-                  />
-                ) : 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>
-                ) : 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.error ? (
-                      <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 PDF preview</p>
-                        <p className="text-red-500 text-sm mb-4 text-center max-w-md">{pdfPages.error}</p>
-                        <p className="text-slate-600 text-xs mb-4 text-center max-w-md">
-                          This might be because poppler-utils is not installed. PDFs can still be downloaded.
-                        </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 PDF
-                        </Button>
-                      </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/${String(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" />
-                    <p className="text-slate-600 mb-4">Preview not available for this file type</p>
-                    <Button 
-                      onClick={() => window.open(`/api/assets/${String(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 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>
-                  <div className="flex gap-2">
-                    <Button 
-                      onClick={() => window.open(`/api/assets/${String(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(String(previewAsset.id));
-                        }
-                      }}
-                      disabled={isDeleting}
-                    >
-                      <Trash2 className="w-4 h-4 mr-2" />
-                      {isDeleting ? 'Deleting...' : 'Delete'}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
-
+  import React, { useState, useRef, useEffect } from 'react';
+  import { motion, AnimatePresence } from 'framer-motion';
+  import { 
+    Upload, 
+    FolderOpen, 
+    Image, 
+    FileText, 
+    Video, 
+    Search,
+    Filter,
+    Grid3X3,
+    List,
+    MoreVertical,
+    Download,
+    Trash2,
+    Eye,
+    ChevronDown,
+    ChevronRight,
+    Plus,
+    X,
+    Check,
+    File,
+    Copy
+  } from 'lucide-react';
+  import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+  import { Button } from '@/components/ui/button';
+  import { Input } from '@/components/ui/input';
+  import { Badge } from '@/components/ui/badge';
+  import { Label } from '@/components/ui/label';
+  import { Progress } from '@/components/ui/progress';
+  import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+  } from '@/components/ui/select';
+  import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+  } from '@/components/ui/dropdown-menu';
+  import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+  } from '@/components/ui/dialog';
+  import { Checkbox } from '@/components/ui/checkbox';
+
+  const products = [
+    {
+      id: 'ocr',
+      name: 'Intelligent Document Parsing (OCR)',
+      shortName: 'OCR',
+      color: 'blue',
+      subCategories: []
+    },
+    {
+      id: 'p2p',
+      name: 'Purchase To Pay (P2P)',
+      shortName: 'P2P',
+      color: 'emerald',
+      subCategories: [
+        'Budget Approval Workflow',
+        'Purchase Request Workflow',
+        'Accounts Payable Workflow'
+      ]
+    },
+    {
+      id: 'o2c',
+      name: 'Order to Cash (O2C)',
+      shortName: 'O2C',
+      color: 'violet',
+      subCategories: [
+        'Quotation Workflow',
+        'Sales Order Workflow',
+        'PickSlip Delivery Workflow',
+        'Accounts Receivable Workflow'
+      ]
+    }
+  ];
+
+  const mockAssets = [
+    { id: '1', name: 'OCR_Demo_Screenshot.png', type: 'image', product: 'ocr', subCategory: null, size: '2.4 MB', date: '2024-12-20' },
+    { id: '2', name: 'P2P_Workflow_Diagram.pdf', type: 'document', product: 'p2p', subCategory: 'Budget Approval Workflow', size: '1.8 MB', date: '2024-12-19' },
+    { id: '3', name: 'Invoice_Processing_Video.mp4', type: 'video', product: 'ocr', subCategory: null, size: '45.2 MB', date: '2024-12-18' },
+    { id: '4', name: 'Sales_Order_Infographic.png', type: 'image', product: 'o2c', subCategory: 'Sales Order Workflow', size: '3.1 MB', date: '2024-12-17' },
+    { id: '5', name: 'AP_Automation_Brochure.pdf', type: 'document', product: 'p2p', subCategory: 'Accounts Payable Workflow', size: '5.6 MB', date: '2024-12-16' },
+    { id: '6', name: 'O2C_Product_Banner.png', type: 'image', product: 'o2c', subCategory: 'Quotation Workflow', size: '1.2 MB', date: '2024-12-15' },
+    { id: '7', name: 'Document_Parsing_Demo.png', type: 'image', product: 'ocr', subCategory: null, size: '890 KB', date: '2024-12-14' },
+    { id: '8', name: 'PR_Workflow_Guide.pdf', type: 'document', product: 'p2p', subCategory: 'Purchase Request Workflow', size: '2.3 MB', date: '2024-12-13' },
+  ];
+
+  export default function Repository() {
+    const [viewMode, setViewMode] = useState('grid');
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedProduct, setSelectedProduct] = useState('all');
+    const [expandedProducts, setExpandedProducts] = useState(['ocr', 'p2p', 'o2c']);
+    const [selectedAssets, setSelectedAssets] = useState([]);
+    const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+    const [dragOver, setDragOver] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [uploadProductCategory, setUploadProductCategory] = useState('');
+    const [uploadSubCategory, setUploadSubCategory] = useState('');
+    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 [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) => {
+      setExpandedProducts(prev => 
+        prev.includes(productId) 
+          ? prev.filter(id => id !== productId)
+          : [...prev, productId]
+      );
+    };
+
+    const filteredAssets = assets.filter(asset => {
+      const matchesSearch = asset.name.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesProduct = selectedProduct === 'all' || asset.product === selectedProduct;
+      return matchesSearch && matchesProduct;
+    });
+
+    const getAssetsByProduct = (productId) => {
+      return assets.filter(asset => asset.product === productId);
+    };
+
+    const getTypeIcon = (type) => {
+      switch(type) {
+        case 'image': return <Image className="w-5 h-5 text-pink-500" />;
+        case 'video': return <Video className="w-5 h-5 text-red-500" />;
+        case 'document': return <FileText className="w-5 h-5 text-blue-500" />;
+        default: return <File className="w-5 h-5 text-slate-500" />;
+      }
+    };
+
+    const getProductColor = (productId) => {
+      const product = products.find(p => p.id === productId);
+      return product?.color || 'slate';
+    };
+
+    // Fetch assets from API
+    const fetchAssets = async () => {
+      setIsLoadingAssets(true);
+      try {
+        const response = await fetch('/api/assets');
+        if (response.ok) {
+          const data = await response.json();
+          console.log('Fetched assets from API:', data); // Debug log
+          
+          // Convert API response to match mockAssets format
+          // IMPORTANT: Keep IDs as strings to preserve precision for large CockroachDB IDs
+          const formattedAssets = data.map(asset => {
+            // Handle date formatting more robustly
+            let dateStr = new Date().toISOString().split('T')[0]; // Default to today
+            if (asset.created_at) {
+              try {
+                // Handle both string and datetime object
+                let date;
+                if (asset.created_at instanceof Date) {
+                  date = asset.created_at;
+                } else if (typeof asset.created_at === 'string') {
+                  date = new Date(asset.created_at);
+                } else {
+                  // Handle datetime object from backend
+                  date = new Date(asset.created_at);
+                }
+                
+                if (!isNaN(date.getTime())) {
+                  dateStr = date.toISOString().split('T')[0];
+                } else {
+                  console.warn('Invalid date:', asset.created_at);
+                }
+              } catch (e) {
+                console.warn('Date parsing error:', e, asset.created_at);
+              }
+            }
+            
+            // CRITICAL: Keep ID as string - never convert to number (precision loss for large IDs)
+            // If asset.id is already a number, convert it carefully to preserve precision
+            let assetIdStr;
+            if (typeof asset.id === 'string') {
+              assetIdStr = asset.id;
+            } else if (typeof asset.id === 'number') {
+              // For very large numbers, use BigInt to preserve precision, then convert to string
+              assetIdStr = BigInt(asset.id).toString();
+            } else {
+              assetIdStr = String(asset.id);
+            }
+            
+            return {
+              id: assetIdStr,  // Always keep as string to preserve precision for large CockroachDB IDs
+              name: asset.name || 'Unknown',
+              type: asset.file_type || 'unknown',
+              product: asset.product_category || 'ocr',
+              subCategory: asset.sub_category || null,
+              size: formatFileSize(asset.size || 0),
+              date: dateStr
+            };
+          });
+          
+          console.log('Formatted assets:', formattedAssets); // Debug log
+          setAssets(formattedAssets);
+        } else {
+          const errorText = await response.text();
+          console.error('Failed to fetch assets:', response.status, errorText);
+          // Don't reset to mockAssets - keep what we have
+        }
+      } catch (error) {
+        console.error('Error fetching assets:', error);
+        // Don't reset to mockAssets - keep what we have
+      } finally {
+        setIsLoadingAssets(false);
+      }
+    };
+
+    // Format file size
+    const formatFileSize = (bytes) => {
+      if (!bytes) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    };
+
+    // Handle delete asset
+    const handleDeleteAsset = async (assetId) => {
+      setIsDeleting(true);
+      try {
+        // Ensure assetId is a string to preserve precision
+        const assetIdStr = String(assetId);
+        const response = await fetch(`/api/assets/${assetIdStr}`, {
+          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 {
+      // CRITICAL: Ensure assetId is a string to preserve precision for large IDs
+      // Never convert to number - JavaScript loses precision for numbers > Number.MAX_SAFE_INTEGER
+      let assetIdStr;
+      if (typeof assetId === 'string') {
+        assetIdStr = assetId;
+      } else if (typeof assetId === 'number') {
+        // Use BigInt to preserve precision, then convert to string
+        assetIdStr = BigInt(assetId).toString();
+      } else {
+        assetIdStr = String(assetId);
+      }
+      console.log(`Loading PDF for asset ID: ${assetIdStr} (original type: ${typeof assetId})`);
+      const response = await fetch(`/api/assets/${assetIdStr}/pdf-pages`);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setPdfPages(data);
+        } else {
+          const errorData = await response.json().catch(() => ({ 
+            detail: response.status === 503 
+              ? 'PDF preview requires poppler-utils to be installed on the server'
+              : 'Failed to load PDF preview' 
+          }));
+          console.error('Failed to load PDF pages:', errorData);
+          setPdfPages({ error: errorData.detail || 'Failed to load PDF preview' });
+        }
+      } catch (error) {
+        console.error('Error loading PDF pages:', error);
+        setPdfPages({ 
+          error: error.message || 'Failed to load PDF preview. Make sure poppler-utils is installed.' 
+        });
+      } finally {
+        setIsLoadingPdf(false);
+      }
+    };
+
+    // Fetch assets on component mount and when upload dialog closes
+    useEffect(() => {
+      fetchAssets();
+    }, []);
+
+    // Refresh assets after successful upload
+    useEffect(() => {
+      if (!uploadDialogOpen && !isUploading) {
+        console.log('useEffect: Refreshing assets (dialog closed, not uploading)');
+        fetchAssets();
+      }
+    }, [uploadDialogOpen, isUploading]);
+
+    // Auto-load PDF pages when preview opens for PDF files
+    useEffect(() => {
+      if (previewAsset && previewDialogOpen) {
+        // Load PDF pages if it's a PDF
+        if (previewAsset.type === 'document' && previewAsset.name.toLowerCase().endsWith('.pdf')) {
+          console.log('Auto-loading PDF pages for:', previewAsset.id);
+          loadPdfPages(String(previewAsset.id));
+        } else {
+          setPdfPages(null);
+        }
+      }
+    }, [previewAsset, previewDialogOpen]);
+
+    const handleFileSelect = (files) => {
+      const fileArray = Array.from(files);
+      setSelectedFiles(fileArray);
+    };
+
+    const handleDragDrop = (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      if (e.dataTransfer.files) {
+        handleFileSelect(e.dataTransfer.files);
+      }
+    };
+
+    const handleFileInputChange = (e) => {
+      if (e.target.files) {
+        handleFileSelect(e.target.files);
+      }
+    };
+
+    const pollAssetStatus = async (assetId, fileName) => {
+      const maxAttempts = 60; // Poll for up to 60 seconds
+      let attempts = 0;
+      let consecutive404s = 0;
+      const max404s = 5; // Allow up to 5 consecutive 404s (asset might not be visible yet)
+      
+      // Small delay before first poll to allow database commit
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      while (attempts < maxAttempts) {
+        try {
+          const response = await fetch(`/api/assets/${assetId}/status`);
+          if (response.ok) {
+            const status = await response.json();
+            consecutive404s = 0; // Reset 404 counter on success
+            setUploadProgress(prev => ({
+              ...prev,
+              [fileName]: {
+                status: status.status,
+                message: getStatusMessage(status.status),
+                extractedContent: status.extracted_content || null  // Store extracted JSON
+              }
+            }));
+            
+            if (status.status === 'completed' || status.status === 'failed') {
+              break;
+            }
+          } else if (response.status === 404) {
+            consecutive404s++;
+            // If we get too many 404s, stop polling (asset might not exist)
+            if (consecutive404s >= max404s) {
+              console.warn(`Asset ${assetId} not found after ${max404s} attempts`);
+              setUploadProgress(prev => ({
+                ...prev,
+                [fileName]: {
+                  status: 'pending',
+                  message: 'Asset status unavailable'
+                }
+              }));
+              break;
+            }
+            // For first few 404s, keep trying (might be replication lag)
+          } else {
+            // Other errors - log but keep trying
+            console.error(`Status check failed: ${response.status}`);
+          }
+        } catch (error) {
+          console.error('Error polling status:', error);
+          // On network errors, keep trying
+        }
+        
+        await new Promise(resolve => setTimeout(resolve, 1000)); // Poll every second
+        attempts++;
+      }
+    };
+
+    const getStatusMessage = (status) => {
+      switch(status) {
+        case 'pending': return 'Uploading file...';
+        case 'processing': return 'Extracting content with OCR...';
+        case 'completed': return 'Content extracted and indexed by AI agent ✓';
+        case 'failed': return 'Analysis failed';
+        default: return 'Processing...';
+      }
+    };
+
+    const handleUpload = async () => {
+      if (selectedFiles.length === 0) {
+        alert('Please select at least one file to upload');
+        return;
+      }
+      if (!uploadProductCategory) {
+        alert('Please select a product category');
+        return;
+      }
+
+      setIsUploading(true);
+      setUploadProgress({});
+      
+      try {
+        // Initialize progress for all files
+        const initialProgress = {};
+        selectedFiles.forEach(file => {
+          initialProgress[file.name] = {
+            status: 'pending',
+            message: 'Uploading file...'
+          };
+        });
+        setUploadProgress(initialProgress);
+
+        // Upload files sequentially to show progress
+        const results = [];
+        for (const file of selectedFiles) {
+          try {
+            setUploadProgress(prev => ({
+              ...prev,
+              [file.name]: {
+                status: 'pending',
+                message: 'Uploading file...'
+              }
+            }));
+
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('product_category', uploadProductCategory);
+            if (uploadSubCategory && uploadSubCategory !== 'none') {
+              formData.append('sub_category', uploadSubCategory);
+            }
+
+            const response = await fetch('/api/assets/upload', {
+              method: 'POST',
+              body: formData,
+            });
+
+            if (!response.ok) {
+              const errorData = await response.json().catch(() => ({ detail: 'Upload failed' }));
+              throw new Error(errorData.detail || `Upload failed for ${file.name}`);
+            }
+
+            const result = await response.json();
+            results.push(result);
+
+            // Ensure ID is kept as string to preserve precision
+            const assetId = String(result.id);
+
+            // Update progress - file uploaded, now analyzing
+            setUploadProgress(prev => ({
+              ...prev,
+              [file.name]: {
+                status: result.analysis_status || 'processing',
+                message: result.analysis_status === 'processing' 
+                  ? 'Extracting content with OCR...' 
+                  : 'Upload complete, analyzing...'
+              }
+            }));
+
+            // Start polling for analysis status if it's a document/image
+            if (result.file_type === 'document' || result.file_type === 'image') {
+              pollAssetStatus(assetId, file.name);
+            } else {
+              setUploadProgress(prev => ({
+                ...prev,
+                [file.name]: {
+                  status: 'completed',
+                  message: 'Upload complete ✓'
+                }
+              }));
+            }
+          } catch (error) {
+            console.error(`Upload error for ${file.name}:`, error);
+            setUploadProgress(prev => ({
+              ...prev,
+              [file.name]: {
+                status: 'failed',
+                message: `Upload failed: ${error.message}`
+              }
+            }));
+          }
+        }
+        
+        console.log('Upload results:', results);
+        
+        // Refresh assets immediately after upload
+        console.log('Refreshing assets after upload...');
+        await fetchAssets();
+        
+        // Wait a bit more for database to commit, then refresh again
+        setTimeout(async () => {
+          console.log('Refreshing assets again after delay...');
+          await fetchAssets();
+        }, 1500);
+        
+        // Don't close dialog immediately - let user see the progress
+        // Reset form after a delay
+        setTimeout(() => {
+          setSelectedFiles([]);
+          setUploadProductCategory('');
+          setUploadSubCategory('');
+          setUploadProgress({});
+          setUploadDialogOpen(false);
+          // Refresh again after dialog closes to ensure latest data
+          console.log('Refreshing assets after dialog closes...');
+          fetchAssets();
+        }, 3000);
+        
+      } catch (error) {
+        console.error('Upload error:', error);
+        alert(`Upload failed: ${error.message}`);
+      } finally {
+        setIsUploading(false);
+      }
+    };
+
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {/* Header */}
+          <motion.div 
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="mb-8"
+          >
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              <div>
+                <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+                  Asset Repository
+                </h1>
+                <p className="text-slate-500 mt-1">
+                  Manage your marketing materials, screenshots, and documents
+                </p>
+              </div>
+              <Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>
+                <DialogTrigger asChild>
+                  <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                    <Upload className="w-4 h-4" />
+                    Upload Assets
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-lg">
+                  <DialogHeader>
+                    <DialogTitle>Upload Assets</DialogTitle>
+                  </DialogHeader>
+                  <div className="space-y-4 pt-4">
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      onChange={handleFileInputChange}
+                      multiple
+                      className="hidden"
+                      accept="image/*,video/*,.pdf,.doc,.docx"
+                    />
+                    <div 
+                      className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
+                        dragOver ? 'border-blue-500 bg-blue-50' : 'border-slate-200 hover:border-slate-300'
+                      }`}
+                      onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+                      onDragLeave={() => setDragOver(false)}
+                      onDrop={handleDragDrop}
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <Upload className="w-10 h-10 text-slate-400 mx-auto mb-3" />
+                      <p className="text-sm font-medium text-slate-700">
+                        Drag and drop files here
+                      </p>
+                      <p className="text-xs text-slate-500 mt-1">
+                        or click to browse
+                      </p>
+                      <Button 
+                        variant="outline" 
+                        size="sm" 
+                        className="mt-4"
+                        type="button"
+                        onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}
+                      >
+                        Browse Files
+                      </Button>
+                      {selectedFiles.length > 0 && (
+                        <div className="mt-4 space-y-3">
+                          <p className="text-xs font-medium text-slate-600">Selected files:</p>
+                          {selectedFiles.map((file, index) => {
+                            const progress = uploadProgress[file.name];
+                            const getProgressValue = () => {
+                              if (!progress) return 0;
+                              switch(progress.status) {
+                                case 'pending': return 25;
+                                case 'processing': return 60;
+                                case 'completed': return 100;
+                                case 'failed': return 0;
+                                default: return 0;
+                              }
+                            };
+                            const getProgressColor = () => {
+                              if (!progress) return 'bg-blue-500';
+                              switch(progress.status) {
+                                case 'pending': return 'bg-blue-500';
+                                case 'processing': return 'bg-yellow-500';
+                                case 'completed': return 'bg-green-500';
+                                case 'failed': return 'bg-red-500';
+                                default: return 'bg-blue-500';
+                              }
+                            };
+                            return (
+                              <div key={index} className="space-y-2">
+                                <div className="flex items-center justify-between text-xs bg-slate-50 p-2 rounded">
+                                  <span className="text-slate-700 truncate flex-1 mr-2">{file.name}</span>
+                                  <span className="text-slate-500 whitespace-nowrap">{(file.size / 1024 / 1024).toFixed(2)} MB</span>
+                                </div>
+                                {isUploading && (
+                                  <div className="space-y-1">
+                                    <div className="flex items-center justify-between text-xs">
+                                      <span className={`font-medium ${
+                                        progress?.status === 'completed' ? 'text-green-600' :
+                                        progress?.status === 'failed' ? 'text-red-600' :
+                                        progress?.status === 'processing' ? 'text-yellow-600' :
+                                        'text-blue-600'
+                                      }`}>
+                                        {progress?.message || 'Uploading...'}
+                                      </span>
+                                      {progress?.status === 'completed' && <Check className="w-3 h-3 text-green-600" />}
+                                      {progress?.status === 'failed' && <X className="w-3 h-3 text-red-600" />}
+                                    </div>
+                                    <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
+                                      <div 
+                                        className={`h-full transition-all ${getProgressColor()}`}
+                                        style={{ width: `${getProgressValue()}%` }}
+                                      />
+                                    </div>
+                                    {/* JSON Output Display */}
+                                    {progress?.status === 'completed' && progress?.extractedContent && (
+                                      <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                                        <div className="flex items-center justify-between mb-2">
+                                          <p className="text-xs font-medium text-slate-700">Extracted JSON Output:</p>
+                                          <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            className="h-6 px-2 text-xs"
+                                            onClick={() => {
+                                              const jsonStr = JSON.stringify(progress.extractedContent, null, 2);
+                                              navigator.clipboard.writeText(jsonStr).then(() => {
+                                                alert('JSON copied to clipboard!');
+                                              }).catch(() => {
+                                                alert('Failed to copy JSON');
+                                              });
+                                            }}
+                                          >
+                                            <Copy className="w-3 h-3 mr-1" />
+                                            Copy
+                                          </Button>
+                                        </div>
+                                        <pre className="text-xs text-slate-600 bg-white p-2 rounded border border-slate-200 max-h-40 overflow-auto font-mono">
+                                          {JSON.stringify(progress.extractedContent, null, 2)}
+                                        </pre>
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                    
+                    <div className="space-y-3">
+                      <div>
+                        <Label>Product Category</Label>
+                        <Select value={uploadProductCategory} onValueChange={setUploadProductCategory}>
+                          <SelectTrigger className="mt-1.5">
+                            <SelectValue placeholder="Select a product" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {products.map(product => (
+                              <SelectItem key={product.id} value={product.id}>
+                                {product.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      
+                      <div>
+                        <Label>Sub-Category (Optional)</Label>
+                        <Select 
+                          value={uploadSubCategory} 
+                          onValueChange={setUploadSubCategory}
+                          disabled={!uploadProductCategory || products.find(p => p.id === uploadProductCategory)?.subCategories?.length === 0}
+                        >
+                          <SelectTrigger className="mt-1.5">
+                            <SelectValue placeholder="Select sub-category" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="none">None</SelectItem>
+                            {uploadProductCategory && products.find(p => p.id === uploadProductCategory)?.subCategories?.map((sub, idx) => (
+                              <SelectItem key={idx} value={sub}>{sub}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    
+                    <div className="flex justify-end gap-2 pt-4">
+                      <Button 
+                        variant="outline" 
+                        onClick={() => {
+                          setUploadDialogOpen(false);
+                          setSelectedFiles([]);
+                          setUploadProductCategory('');
+                          setUploadSubCategory('');
+                        }}
+                        disabled={isUploading}
+                      >
+                        Cancel
+                      </Button>
+                      <Button 
+                        className="bg-blue-600 hover:bg-blue-700"
+                        onClick={handleUpload}
+                        disabled={isUploading || selectedFiles.length === 0 || !uploadProductCategory}
+                      >
+                        {isUploading ? 'Uploading...' : 'Upload'}
+                      </Button>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </motion.div>
+
+          <div className="grid lg:grid-cols-4 gap-6">
+            {/* Sidebar - Product Categories */}
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              className="lg:col-span-1"
+            >
+              <Card className="border-0 shadow-lg shadow-slate-200/50 sticky top-8">
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-sm font-semibold text-slate-600 uppercase tracking-wider">
+                    Product Categories
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  <div className="space-y-1">
+                    <button
+                      onClick={() => setSelectedProduct('all')}
+                      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
+                        selectedProduct === 'all' 
+                          ? 'bg-blue-50 text-blue-700' 
+                          : 'hover:bg-slate-50 text-slate-700'
+                      }`}
+                    >
+                      <FolderOpen className="w-4 h-4" />
+                      <span className="font-medium text-sm">All Assets</span>
+                      <Badge variant="secondary" className="ml-auto text-xs">
+                        {assets.length}
+                      </Badge>
+                    </button>
+                    
+                    {products.map(product => (
+                      <div key={product.id}>
+                        <button
+                          onClick={() => {
+                            setSelectedProduct(product.id);
+                            if (product.subCategories.length > 0) {
+                              toggleProduct(product.id);
+                            }
+                          }}
+                          className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
+                            selectedProduct === product.id 
+                              ? `bg-${product.color}-50 text-${product.color}-700` 
+                              : 'hover:bg-slate-50 text-slate-700'
+                          }`}
+                        >
+                          {product.subCategories.length > 0 && (
+                            <ChevronRight className={`w-4 h-4 transition-transform ${
+                              expandedProducts.includes(product.id) ? 'rotate-90' : ''
+                            }`} />
+                          )}
+                          {product.subCategories.length === 0 && <div className="w-4" />}
+                          <span className="font-medium text-sm truncate">{product.shortName}</span>
+                          <Badge variant="secondary" className="ml-auto text-xs">
+                            {getAssetsByProduct(product.id).length}
+                          </Badge>
+                        </button>
+                        
+                        <AnimatePresence>
+                          {expandedProducts.includes(product.id) && product.subCategories.length > 0 && (
+                            <motion.div
+                              initial={{ height: 0, opacity: 0 }}
+                              animate={{ height: 'auto', opacity: 1 }}
+                              exit={{ height: 0, opacity: 0 }}
+                              className="overflow-hidden"
+                            >
+                              <div className="ml-7 pl-3 border-l border-slate-200 mt-1 space-y-1">
+                                {product.subCategories.map((sub, idx) => (
+                                  <button
+                                    key={idx}
+                                    className="w-full text-left px-3 py-2 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
+                                  >
+                                    {sub}
+                                  </button>
+                                ))}
+                              </div>
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Main Content */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="lg:col-span-3"
+            >
+              {/* Search and Filters */}
+              <Card className="border-0 shadow-lg shadow-slate-200/50 mb-6">
+                <CardContent className="p-4">
+                  <div className="flex flex-col sm:flex-row gap-3">
+                    <div className="relative flex-1">
+                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                      <Input
+                        placeholder="Search assets..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="pl-10 border-slate-200"
+                      />
+                    </div>
+                    <div className="flex gap-2">
+                      <Select defaultValue="all">
+                        <SelectTrigger className="w-32 border-slate-200">
+                          <Filter className="w-4 h-4 mr-2" />
+                          <SelectValue placeholder="Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">All Types</SelectItem>
+                          <SelectItem value="image">Images</SelectItem>
+                          <SelectItem value="document">Documents</SelectItem>
+                          <SelectItem value="video">Videos</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <div className="flex border border-slate-200 rounded-lg overflow-hidden">
+                        <Button
+                          variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
+                          size="icon"
+                          onClick={() => setViewMode('grid')}
+                          className="rounded-none"
+                        >
+                          <Grid3X3 className="w-4 h-4" />
+                        </Button>
+                        <Button
+                          variant={viewMode === 'list' ? 'secondary' : 'ghost'}
+                          size="icon"
+                          onClick={() => setViewMode('list')}
+                          className="rounded-none"
+                        >
+                          <List className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Assets Grid/List */}
+              {viewMode === 'grid' ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
+                  {filteredAssets.map((asset, index) => (
+                    <motion.div
+                      key={asset.id}
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ delay: index * 0.05 }}
+                    >
+                      <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group overflow-hidden">
+                        <div className={`h-40 bg-gradient-to-br from-${getProductColor(asset.product)}-100 to-${getProductColor(asset.product)}-50 flex items-center justify-center relative`}>
+                          {asset.type === 'image' ? (
+                            <Image className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
+                          ) : asset.type === 'video' ? (
+                            <Video className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
+                          ) : (
+                            <FileText className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
+                          )}
+                          <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"
+                                onClick={async (e) => {
+                                  e.stopPropagation();
+                                  setPreviewAsset(asset);
+                                  setPreviewDialogOpen(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);
+                                  }
+                                }}
+                              >
+                                <Eye className="w-4 h-4" />
+                              </Button>
+                              <Button 
+                                size="icon" 
+                                variant="secondary" 
+                                className="h-9 w-9"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  window.open(`/api/assets/${String(asset.id)}/download`, '_blank');
+                                }}
+                              >
+                                <Download className="w-4 h-4" />
+                              </Button>
+                            </div>
+                          </div>
+                          <div className="absolute top-2 right-2">
+                            <Checkbox className="bg-white border-slate-300" />
+                          </div>
+                        </div>
+                        <CardContent className="p-4">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="min-w-0">
+                              <h3 className="font-medium text-slate-900 text-sm truncate">
+                                {asset.name}
+                              </h3>
+                              <p className="text-xs text-slate-500 mt-1">
+                                {asset.size} • {asset.date}
+                              </p>
+                            </div>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                                  <MoreVertical className="w-4 h-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                <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(String(asset.id));
+                                  } else {
+                                    setPdfPages(null);
+                                  }
+                                }}>
+                                  <Eye className="w-4 h-4 mr-2" /> Preview
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => {
+                                  window.open(`/api/assets/${String(asset.id)}/download`, '_blank');
+                                }}>
+                                  <Download className="w-4 h-4 mr-2" /> Download
+                                </DropdownMenuItem>
+                                <DropdownMenuItem 
+                                  className="text-red-600"
+                                  onClick={async () => {
+                                    if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {
+                                      await handleDeleteAsset(String(asset.id));
+                                    }
+                                  }}
+                                >
+                                  <Trash2 className="w-4 h-4 mr-2" /> Delete
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                          <div className="flex gap-2 mt-3">
+                            <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700 bg-${getProductColor(asset.product)}-50`}>
+                              {products.find(p => p.id === asset.product)?.shortName}
+                            </Badge>
+                            {asset.subCategory && (
+                              <Badge variant="outline" className="text-xs border-slate-200 text-slate-600 truncate max-w-[120px]">
+                                {asset.subCategory}
+                              </Badge>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </motion.div>
+                  ))}
+                </div>
+              ) : (
+                <Card className="border-0 shadow-lg shadow-slate-200/50">
+                  <CardContent className="p-0">
+                    <div className="divide-y divide-slate-100">
+                      {filteredAssets.map((asset, index) => (
+                        <motion.div
+                          key={asset.id}
+                          initial={{ opacity: 0, x: -10 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{ delay: index * 0.03 }}
+                          className="flex items-center gap-4 p-4 hover:bg-slate-50 transition-colors"
+                        >
+                          <Checkbox />
+                          <div className={`w-10 h-10 rounded-lg bg-${getProductColor(asset.product)}-100 flex items-center justify-center`}>
+                            {getTypeIcon(asset.type)}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-medium text-slate-900 text-sm truncate">
+                              {asset.name}
+                            </h3>
+                            <p className="text-xs text-slate-500 mt-0.5">
+                              {asset.subCategory || products.find(p => p.id === asset.product)?.name}
+                            </p>
+                          </div>
+                          <div className="hidden sm:block text-sm text-slate-500">
+                            {asset.size}
+                          </div>
+                          <div className="hidden md:block text-sm text-slate-500">
+                            {asset.date}
+                          </div>
+                          <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700`}>
+                            {products.find(p => p.id === asset.product)?.shortName}
+                          </Badge>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="icon" className="h-8 w-8">
+                                <MoreVertical className="w-4 h-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <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(String(asset.id));
+                                  } else {
+                                    setPdfPages(null);
+                                  }
+                                }}>
+                                  <Eye className="w-4 h-4 mr-2" /> Preview
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => {
+                                  window.open(`/api/assets/${String(asset.id)}/download`, '_blank');
+                                }}>
+                                  <Download className="w-4 h-4 mr-2" /> Download
+                                </DropdownMenuItem>
+                                <DropdownMenuItem 
+                                  className="text-red-600"
+                                  onClick={async () => {
+                                    if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {
+                                      await handleDeleteAsset(String(asset.id));
+                                    }
+                                  }}
+                                >
+                                <Trash2 className="w-4 h-4 mr-2" /> Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </motion.div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </motion.div>
+          </div>
+        </div>
+
+        {/* Preview Dialog */}
+        <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 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(String(previewAsset.id));
+                      }
+                    }}
+                    disabled={isDeleting}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                )}
+              </DialogTitle>
+            </DialogHeader>
+            <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"
+                    />
+                  ) : 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>
+                  ) : 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.error ? (
+                        <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 PDF preview</p>
+                          <p className="text-red-500 text-sm mb-4 text-center max-w-md">{pdfPages.error}</p>
+                          <p className="text-slate-600 text-xs mb-4 text-center max-w-md">
+                            This might be because poppler-utils is not installed. PDFs can still be downloaded.
+                          </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 PDF
+                          </Button>
+                        </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/${String(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" />
+                      <p className="text-slate-600 mb-4">Preview not available for this file type</p>
+                      <Button 
+                        onClick={() => window.open(`/api/assets/${String(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 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>
+                    <div className="flex gap-2">
+                      <Button 
+                        onClick={() => window.open(`/api/assets/${String(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(String(previewAsset.id));
+                          }
+                        }}
+                        disabled={isDeleting}
+                      >
+                        <Trash2 className="w-4 h-4 mr-2" />
+                        {isDeleting ? 'Deleting...' : 'Delete'}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+