index.tsx)¶

Overview¶

PDF preview interface that allows users to view and upload documents with type classification.

Features¶

PDF document preview
Document type selection
Document upload functionality
Back navigation
Upload status notifications
Custom toolbar configuration
Responsive layout

URL Parameters¶

None - authenticated route

Implementation¶

State Management¶

// PDF State
const [pdfInstance, setPdfInstance] = useState<any | null>(null);
const [pdfLoaded, setPdfLoaded] = useState(false);

// UI State
const [uploadStatus, setUploadStatus] = useState<'success' | 'failure' | 'none'>('none');
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState<boolean>(false);
const [dropdownTypeSelection, setDropDownTypesSelection] = useState<String>('Type of Document');

Methods¶

const loadPSPDFKit = async () =>
// Initializes PSPDFKit viewer with custom configuration

const submitDocument = async () =>
// Handles document upload with metadata

const handleTypeDropdown = (type: String) =>
// Updates document type selection

const arrayBufferToBase64 = (buffer: ArrayBuffer) =>
// Converts ArrayBuffer to base64 string for upload

HTML Structure¶

<div>
  {/* Navigation Header */}
  <div className="header">
    <Link href="/">
      <img src="/app/back.png" alt="back" />
    </Link>
    <p>Preview Document</p>
    {/* Type Dropdown and Upload Button */}
  </div>

  {/* Upload Status Banner */}
  <div className="banner-container">
    <Banner message={message} success={status} />
  </div>

  {/* PDF Viewer */}
  <div ref={containerRef} className="pdf-viewer" />
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

API Routes¶

/api/documents/uploadDocument - Handles document upload

Routes to Page¶

Direct: /pdf-preview
From: Document upload flows
From: Document preview actions

Dependencies¶

import { useSession } from 'next-auth/react'
import dynamic from 'next/dynamic'
import { Dropdown, Button } from 'react-bootstrap'
import PSPDFKit from 'pspdfkit'

Notes¶

Uses PSPDFKit for PDF rendering
Supports document type classification
Handles base64 and ArrayBuffer conversions
Features upload status notifications
Includes back navigation
Custom toolbar configuration
Initial zoom set to 0.9
Requires authentication