Numerous Bug Fixes

frontend/src/components/PdfViewer.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Loader2 } from 'lucide-react';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+
+if (typeof window !== 'undefined') {
+  pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+}
+
+export default function PdfViewer({ url }: { url: string }) {
+  const [numPages, setNumPages] = useState<number>();
+  const [scale, setScale] = useState<number>(1.2);
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
+    setNumPages(numPages);
+  }
+
+  return (
+    <div className="flex flex-col w-full h-full">
+      {/* PDF Toolbar */}
+      <div className="flex items-center justify-between p-2 border-b" style={{ borderColor: 'var(--color-border-subtle)', backgroundColor: 'var(--color-bg-elevated)' }}>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium w-32 px-2" style={{ color: 'var(--color-text-secondary)' }}>
+            {numPages ? `${numPages} Pages` : 'Loading...'}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setScale(s => Math.max(0.5, s - 0.25))}
+            className="p-1 rounded hover:bg-white/10"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            <ZoomOut className="w-5 h-5" />
+          </button>
+          <span className="text-sm font-medium w-12 text-center" style={{ color: 'var(--color-text-secondary)' }}>
+            {Math.round(scale * 100)}%
+          </span>
+          <button
+            onClick={() => setScale(s => Math.min(3, s + 0.25))}
+            className="p-1 rounded hover:bg-white/10"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            <ZoomIn className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+      
+      {/* PDF Content */}
+      <div className="flex-1 overflow-auto bg-neutral-100 dark:bg-neutral-900 py-4 flex flex-col items-center">
+        <Document
+          file={url}
+          onLoadSuccess={onDocumentLoadSuccess}
+          loading={
+            <div className="flex items-center justify-center h-full mt-20">
+              <Loader2 className="w-8 h-8 animate-spin" style={{ color: 'var(--color-accent)' }} />
+            </div>
+          }
+          className="flex flex-col items-center gap-6"
+        >
+          {numPages && Array.from(new Array(numPages), (el, index) => (
+            <Page
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+              scale={scale}
+              renderTextLayer={true}
+              renderAnnotationLayer={true}
+              className="bg-white shadow-xl"
+            />
+          ))}
+        </Document>
+      </div>
+    </div>
+  );
+}