Skip to main content

Document Detail, Preview, and Lifecycle

The document detail view is a core screen - think of it as a "control panel" for one document.

Layout Structure​

Center: Preview Pane​

  • PDF/Doc viewer for common formats
  • Images with zoom and pan
  • Text/code with syntax highlighting
  • Open in new tab when needed

Left/Top: Document Header​

  • Document title
  • Key status badges:
    • State (Draft, In Review, Approved)
    • Classification
    • Retention
  • Core metadata fields
  • Activity timeline
  • Workflow controls

Preview & Interaction Features​

Viewing Capabilities​

  • In-place viewing for common formats
  • Zoom, page navigation, thumbnails
  • Search within document (if OCR/text available)

Annotations​

  • Section-based comments
  • Anchored annotations for documents that support it
  • Highlight and markup tools

Metadata Panel​

Core Fields​

FieldDescription
OwnerDocument owner
CreatedCreation timestamp
ModifiedLast modified timestamp
VersionCurrent version number
StateLifecycle state
RetentionRetention schedule

Custom Fields (by document type)​

  • Contract dates
  • Customer/client
  • Project association
  • Regulatory mappings

Compliance Features​

  • Inline editing with validation
  • Audit logging hints for compliance workflows
  • Change tracking

Versioning and History​

Version List​

  • Version timeline with:
    • Who made changes
    • When changes were made
    • What changed (diff metadata)
  • Restore previous versions
  • Compare versions side-by-side

Activity Log​

  • Views
  • Edits
  • Approvals
  • Permission changes
  • External shares

Lifecycle Controls​

State Machine Actions​

ActionDescription
Submit for reviewMove to review state
ApproveApprove with optional comment
RejectReject with reason
PublishMake document live
ArchiveMove to archive
Legal holdApply legal hold

Policy Display​

Surface policies prominently:

  • "Retention: 7 years after close"
  • "On legal hold"
  • "Classification: Confidential"

Component Structure​

// DocumentDetailView.tsx
interface DocumentDetailViewProps {
  documentId: string;
}

// DocumentPreview.tsx
interface DocumentPreviewProps {
  document: Document;
  onAnnotate: (annotation: Annotation) => void;
}

// MetadataPanel.tsx
interface MetadataPanelProps {
  metadata: DocumentMetadata;
  onUpdate: (field: string, value: any) => void;
  editable: boolean;
}

// VersionTimeline.tsx
interface VersionTimelineProps {
  versions: Version[];
  currentVersion: number;
  onRestore: (version: number) => void;
  onCompare: (v1: number, v2: number) => void;
}

// ActivityFeed.tsx
interface ActivityFeedProps {
  activities: Activity[];
  filters?: ActivityFilter;
}

References​