React Dashboard UI
Relevant source files
The following files were used as context for generating this wiki page:
The React Dashboard UI serves as the central administrative and creative hub for the Oddity1 platform. It enables users to manage document lifecycles, interact with an AI-powered annotation editor, and handle subscription billing. The system is built using React 19 and Vite, utilizing Tiptap for rich-text editing and Supabase for real-time data synchronization.
Sources: Oddity1Dashboard/package.json:1-30, Oddity1Dashboard/src/pages/DocumentsPage.jsx:1-25
Document Management Architecture
The document management system facilitates the creation, retrieval, and organization of prose documents. It employs a hybrid storage strategy where localStorage acts as a low-latency cache while Supabase provides persistent cloud storage.
Data Synchronization Flow
The useDocuments hook manages the synchronization logic between the client and the server. It utilizes a dirty flag to track local changes that have not yet been successfully persisted to the Supabase backend. When the application detects an online event, it automatically attempts to sync these "dirty" documents.
The system uses a debounced update mechanism (1500ms) to prevent excessive API calls during active typing sessions.
Sources: Oddity1Dashboard/src/hooks/useDocuments.js:4-10, Oddity1Dashboard/src/hooks/useDocuments.js:46-56, Oddity1Dashboard/src/hooks/useDocuments.js:125-140
Document Operations
Users interact with documents through the DocumentsPage component, which supports the following actions:
- Search and Filter: Filters documents by title using a local state search string.
- Grouped View: Organizes documents into time-based sections such as "Today", "Yesterday", and "This Week".
- File Import: Supports drag-and-drop or manual upload for PDF, DOCX, PPTX, TXT, and MD files.
- Deletion: Permanently removes documents from both local and remote storage after user confirmation.
Sources: Oddity1Dashboard/src/pages/DocumentsPage.jsx:55-70, Oddity1Dashboard/src/pages/DocumentsPage.jsx:88-105, Oddity1Dashboard/src/pages/DocumentsPage.jsx:195-210
The Annotation Editor
The EditorPage component implements an interactive workspace for prose analysis. It integrates the Tiptap editor and a custom annotation plugin to bridge structured document content with AI-generated feedback.
Editor Modes
The editor supports two primary operational states:
| Mode | Behavior | User Capabilities |
|---|---|---|
| Edit | Standard rich-text editing enabled. | Text formatting (Bold, Italic, Headings), list creation. |
| Read | Read-only mode for analysis. | View AI annotations in the margin, trigger PDF exports. |
Sources: Oddity1Dashboard/src/pages/EditorPage.jsx:125-145
Annotation Integration
The editor analyzes text and displays annotations through a specialized Tiptap plugin. When the "Annotate" action is triggered, the system extracts the plain text from the editor, processes it via the useAnnotation hook, and updates the document metadata in Supabase.
Subscription and Billing System
The PlansPage component manages user access levels and Stripe-integrated checkout processes. It tracks whether a user is on a "Free" or "Standard" tier to determine feature availability.
Tier Comparison
| Feature | Free Tier | Standard Tier |
|---|---|---|
| Annotation Styles | Terry and Jerry | Terry, Jerry, and Sally |
| Limits | Limited monthly | 20x higher limits |
| PDF Support | Basic | Advanced AI annotations for PDFs |
| Structured Arguments | Not Available | Included |
Sources: Oddity1Dashboard/src/pages/PlansPage.jsx:8-25
Checkout Logic
The checkout process utilizes a "pending checkout" mechanism to handle authentication redirects. If a user attempts to upgrade while unauthenticated, the system stores the selected billing interval in localStorage before redirecting to the auth flow, ensuring the transaction can resume once the session is active.
Sources: Oddity1Dashboard/src/pages/PlansPage.jsx:78-95, Oddity1Dashboard/src/pages/PlansPage.jsx:107-120
Export System
The dashboard includes a dedicated PDF export utility that converts HTML editor content and margin annotations into a formatted A4 document.
Export Pipeline
- Style Mapping: Maps annotation types to specific visual markers (e.g.,
highlight,insight,caveat). - DOM Processing: Uses
DOMParserto recursively mark anchor text within the document body. - Sidenote Injection: Injects sidenotes as floats that alternate between the left and right margins.
- Print Rendering: Builds a complete HTML document with embedded Google Fonts (
LoraandCaveat) and opens the browser's print dialog.
Sources: Oddity1Dashboard/src/utils/exportPdf.js:7-15, Oddity1Dashboard/src/utils/exportPdf.js:23-40, Oddity1Dashboard/src/utils/exportPdf.js:210-230
Document Structure Configuration
The exported document follows a standard layout defined in exportPdf.js:
- Header: Displays the document title, total annotation count, and date.
- Content: A central column (max-width: 750px) containing the prose.
- Margins: 150px gutters on either side for sidenotes.
- Footer: Branded "Exported with Oddity" metadata.
Sources: Oddity1Dashboard/src/utils/exportPdf.js:145-165, Oddity1Dashboard/src/utils/exportPdf.js:185-200
Technical Dependencies
The dashboard is configured with modern frontend libraries to ensure a responsive and extensible UI.
{
"dependencies": {
"@supabase/supabase-js": "^2.49.1",
"@tiptap/react": "^3.20.1",
"react": "^19.0.0",
"react-router-dom": "^7.13.1"
}
}
Sources: Oddity1Dashboard/package.json:10-18