Admin and Backend UI Guide — Reza DocuHandshake

URL: https://docu.r32a.com/admin

Backend utility page for local testing: http://localhost:8080/

1. Admin Sign-In

When you open /admin, the page shows two cards:

• "Go to Document Upload" button for non-admin visitors
• Admin login form for Reza

Current behavior:

• The frontend checks the password against VITE_ADMIN_PASSWORD
• The default example password in .env.example is 454545
• After frontend sign-in, the dashboard loads data from the backend, which separately validates ADMIN_PASSWORD

2. Dashboard List View

After sign-in, the main dashboard shows:

• Search by filename or user email
• Status badges for pending, signed, and completed
• Submitted date, signed date, file size, and comment preview
• Pagination at 6 documents per page
• Archive/unarchive action per document

Toolbar actions:

• Analytics
• Settings
• Download All Signed (N)
• Show Archived / Show Active

3. Settings View

The Settings screen stores a reusable signature preset for future signing actions.

Current options:

• Text signature
• Uploaded image signature
• Scale slider

The preset is now shared through the backend and also cached in browser localStorage, so the same signature can be used across desktop and mobile admin sessions.

4. Document Viewer

Opening a document shows a full document review card with:

• back-to-list action
• page navigation
• zoom controls
• signature marker placement mode
• AI document analysis panel
• sign, resend, download, and reject actions

4.1 PDF Preview

• The PDF is loaded from GET /api/documents/:id/file?adminPassword=...
• react-pdf renders the current page
• Marker overlay sits on top of the page preview

4.2 AI Document Analysis

• "Run Analysis" extracts text from the currently loaded PDF in the browser
• Frontend calls POST /api/admin/analyze-document
• Backend returns:
  • summary
  • key points
  • review areas
  • risks
  • risk assessment

4.3 Signature Markers

• Click on the page to add markers
• Drag markers to reposition them
• Remove markers individually
• Clear all markers
• Load uploader-provided suggested positions when available

4.4 Complete Signature

When Reza clicks "Complete Signature":

1. Frontend downloads the PDF bytes
2. pdf-lib applies the signature preset to each marker
3. Footer text with signer name and signed timestamp is added
4. Frontend uploads the signed PDF to POST /api/admin/upload-signed-file
5. Frontend updates the document metadata through POST /api/admin/update-document
6. Frontend triggers POST /api/notifications/send with type = 'document_signed'

Once signed, the viewer locks marker editing for that document.

4.5 Reject Document

Rejecting a document opens a reason dialog.

Current implementation:

• the document is updated to status = 'completed'
• the audit trail records action = 'rejected'
• the uploader receives a rejection email with the entered reason

5. Analytics View

Analytics are computed client-side from non-archived documents.

Displayed panels:

• Trees saved estimate
• Time saved estimate
• Unique senders
• Completion rate and average processing time
• Top senders
• Document type distribution
• Status distribution
• File size distribution
• Monthly trend
• Peak submission days
• Largest documents
• Recent activity

Available filters:

• All time
• Today
• Last 7 days
• Last 30 days
• Last 90 days
• Last year

6. Bulk ZIP Download

The "Download All Signed" action:

1. filters the current list to status === 'signed'
2. downloads each signed PDF through the secure file endpoint
3. adds them to a JSZip archive
4. saves the archive as signed-documents-YYYY-MM-DD.zip

Each file is named with the first 8 characters of the document ID plus the original filename to reduce collisions.

7. Backend Utility Page

The backend root / serves a lightweight local HTML page for quick manual checks.

Current actions on that page:

• GET /api/health
• GET /api
• POST /api/admin/list-documents
• POST /api/admin/get-document-audit-trail
• POST /api/admin/generate-signature

This page is mainly for local debugging and smoke testing.

8. Component/File Mapping

• Login gate: src/components/admin/AdminAuth.tsx
• Dashboard shell: src/pages/SigningDashboard.tsx
• Document list: src/components/admin/DocumentList.tsx
• Document viewer: src/components/admin/DocumentViewer.tsx
• AI analysis panel: src/components/admin/DocumentAnalysis.tsx
• Settings shell: src/components/admin/SettingsView.tsx
• Signature settings form: src/components/admin/SignatureSettings.tsx
• Analytics view: src/components/admin/AnalyticsView.tsx
• Signature marker used during upload: src/components/SignatureAreaMarker.tsx