Documents Tab

The Documents Tab provides a full-featured document management system for projects. Users can upload, preview, search, sort, download, rename, tag, and delete documents.

Architecture

Database

• Extends existing ProjectFile model with description, tags, and updatedAt fields
• Documents are files with analysisId = null
• Uses PostgreSQL via Prisma ORM

Storage

• Files stored in Vercel Blob storage
• Wrapper functions in apps/app/lib/storage.ts
• Public access with signed URLs for downloads

API Routes

Method	Endpoint	Description
GET	/api/projects/[id]/documents	List documents with search/sort
POST	/api/projects/[id]/documents	Upload new document
GET	/api/projects/[id]/documents/[documentId]	Get document metadata
PUT	/api/projects/[id]/documents/[documentId]	Update document
DELETE	/api/projects/[id]/documents/[documentId]	Delete document
GET	/api/projects/[id]/documents/[documentId]/download	Download with signed URL

React Query Hooks

• useDocuments(projectId, params?) — List documents with search/sort
• useUploadDocument() — Upload with progress tracking
• useUpdateDocument() — Update document metadata
• useDeleteDocument() — Delete document
• useDownloadDocument() — Get signed download URL

UI Components

• DocumentsTab — Main orchestrator component
• DocumentUpload — Drag-and-drop upload with progress
• DocumentList — List/grid view with search and sort
• DocumentActions — CRUD actions dropdown menu

Security Features

• File type validation (PDF, Office docs, images, text)
• 50MB file size limit
• Clerk authentication required
• Project ownership verification
• Signed URLs expire in 15 minutes

Usage

Add the Documents tab to project configuration:

{configActiveTab === 'documents' && projectId && (
  <DocumentsTab projectId={projectId} />
)}

Upload documents with metadata:

const uploadMutation = useUploadDocument();

await uploadMutation.mutateAsync({
  projectId: 'project-id',
  file: selectedFile,
  description: 'Document description',
  tags: ['tag1', 'tag2'],
  onProgress: (progress) => console.log(`${progress}%`),
});

Environment Variables

Ensure BLOB_READ_WRITE_TOKEN is configured for Vercel Blob storage.