Projects/docs/FrontMissingComponents.md

> **Legend:**  
> 🟢 = Already fully implemented (works)  
> 🟡 = Partially implemented (stubs / missing integration)  
> 🔴 = Not implemented (no UI or hook)  

---

## 1. **Paper Collections** – 🔴

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `CollectionsPage.tsx` | 🔴 Does not exist | Create a page that lists user’s collections (grid/list). |
| `CollectionDetailPage.tsx` | 🔴 Does not exist | Page to view a single collection (papers inside). |
| `AddToCollectionModal.tsx` | 🟡 Partial (only in `usePaperCollections` hook, no UI) | Build modal that appears when user clicks “Save to collection” on an article. |
| `CollectionsSidebar.tsx` | 🔴 | Optional sidebar showing collections (like bookmarks). |
| **Integration** | 🟡 Hook `usePaperCollections` exists but never used | Wire the hook into `ArticlesPage` and `ArticleDetailPage` (add “Save to collection” button). |

> **Backend endpoints needed (you said you have them):**  
> `GET /api/collections`, `POST /api/collections`, `DELETE /api/collections/{id}`, `POST /api/collections/{id}/papers`, `DELETE /api/collections/{id}/papers/{paperId}`

---

## 2. **Reference Manager** – 🔴

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `ReferenceManagerPage.tsx` | 🔴 Does not exist | Create a full page for managing references (list, add, remove). |
| `ReferenceImportModal.tsx` | 🔴 | Modal to import by DOI, BibTeX, Zotero, Mendeley. |
| `ReferencePicker.tsx` | 🔴 | Component that appears inside the rich text editor to insert citations. |
| **Integration** | 🟡 Hook `useReferenceManager` exists but not used | Wire into `CollaborativeEditor` and `ScientificEditor`. |

> **Backend endpoints needed:**  
> `GET /api/documents/{docId}/references`, `POST /api/documents/{docId}/references`, `PUT /api/documents/{docId}/references/{refId}`, `DELETE /api/documents/{docId}/references/{refId}`, `POST /api/references/connect-zotero`, `POST /api/references/connect-mendeley`

---

## 3. **Preprint Submission** – 🔴

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `PreprintSubmissionPage.tsx` | 🟡 Exists but is a stub (`PreprintSubmissionPage` only imports but no UI) | Build full submission form (title, abstract, authors, manuscript upload, cover letter). |
| `PreprintScreeningResult.tsx` | 🔴 | Component to show AI screening feedback before final submission. |
| `PreprintListPage.tsx` | 🔴 | List user’s submitted preprints (with status). |
| **Integration** | 🟡 Hook `usePreprintSubmission` exists but not used | Wire into the page and add success/error handling. |

> **Backend endpoints needed:**  
> `POST /api/preprints/screen`, `POST /api/preprints/submit`

---

## 4. **Provenance / Trust (Verifiable Trail)** – 🔴

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `ProvenanceTimeline.tsx` | 🟡 Component exists? (we saw `ProvenanceTimeline` in `trust/` folder but not fully integrated) | Create a modal or sidebar that shows the audit trail (events: creation, edit, share, export). |
| `ProvenanceBadge.tsx` | 🔴 | Small badge on articles/documents indicating verifiable chain. |
| `VerifyChainButton.tsx` | 🔴 | Button that calls `verifyChain` and displays result. |
| **Integration** | 🟡 Hook `useProvenance` exists but not used anywhere | Call it for articles, research objects, or messages. |

> **Backend endpoints needed:**  
> `GET /api/provenance/{entityType}/{entityId}`, `POST /api/provenance/{entityType}/{entityId}/verify`

---

## 5. **Unified Inbox** – 🟡 (partial)

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `UnifiedInboxPage.tsx` | 🟡 Page exists but uses `useUnifiedInbox` which previously lacked backend | Now that backend exists, **test and fix** any data mapping errors. |
| `InboxFilterBar.tsx` | 🟡 Not imported correctly (removed from earlier fix) | Re‑add filter UI (by origin, priority, date). |
| `BroadcastChannelView.tsx` | 🟡 Exists | Ensure it fetches and displays broadcast channels/posts. |
| **Integration** | 🟡 Hook ready | No major code changes – just verify. |

> **Backend endpoint needed:**  
> `GET /api/unified-inbox` – now present.

---

## 6. **Recent Items (Command Palette)** – 🟡

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `App.tsx` fetches `/api/recent-items` | 🔴 This fetch is commented or missing (we removed mock) | Uncomment / implement the fetch in `AppContent` (inside `useEffect`). |
| `usePredictiveActions` | 🟡 Works | No change. |

> **Backend endpoint needed:**  
> `GET /api/recent-items` – you must implement it (returns `{ papers: [], contacts: [] }`).

---

## 7. **Global Search Modal** – 🟡

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `GlobalSearchModal.tsx` | 🟡 Exists | It currently receives `chats` but does not search messages. |
| **Integration** | 🟡 | The modal should call `/api/conversations/search` (private) and `/api/groups/{groupId}/search` (groups) – backend exists. |
| **Search results UI** | 🟡 | Show message previews with highlight. |

> **Backend endpoints exist:**  
> `GET /api/conversations/search`, `GET /api/groups/{groupId}/search`, `GET /api/conversations/search/advanced`.

---

## 8. **Scheduled Messages UI** – 🟡

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `ScheduleModal.tsx` | 🟡 Exists | Already integrated in `ChatArea`? Actually, `ChatArea` has a `ScheduleModal` prop but not yet rendered. |
| `ScheduledMessagesPanel.tsx` | 🟡 Exists | Needs a button in `MessagesPage` to open it (we added a clock icon, but need to wire). |
| **Backend integration** | 🟡 `useMessaging` returns `scheduleMessage` and `showScheduledPanel` | Ensure the modal calls `scheduleMessage` and the panel loads scheduled messages. |

> **Backend endpoints exist:**  
> `GET /api/messages/scheduled`, `POST /api/conversations/{username}/schedule`, `DELETE /api/messages/scheduled/{messageId}`.

---

## 9. **User Liked Articles** – 🟡

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `LikedArticlesPage.tsx` | 🟡 Exists | It calls `api.get("/users/me/liked-articles")` – but backend has only `/users/{username}/liked-articles`. |
| **Fix** | 🔴 | Change the hook/page to call `/users/${currentUsername}/liked-articles` or add an alias on backend. |

---

## 10. **Export (PDF / DOCX / LaTeX)** – 🔴

| Frontend Component | Status | Needed Work |
|--------------------|--------|--------------|
| `SubmissionExportPanel.tsx` | 🟡 Exists (in authoring) | It calls `useSubmissionExport` which expects backend `POST /ai/export`. |
| **Backend** | ❌ Not yet (you said you made backend complete – but earlier export endpoints were missing) | Implement `POST /api/ai/export` that converts HTML to PDF/DOCX/LaTeX. |
| **UI in document editor** | 🟡 Already has export button | Once backend ready, it will work. |

> **Backend endpoints needed:**  
> `POST /api/ai/export`, `POST /api/documents/{docId}/export`.

---

## 11. **Collections & References in Rich Editor** – 🔴

| Feature | Needed Work |
|---------|--------------|
| Insert citation from reference manager | Add a button in `ScientificEditor` toolbar that opens `ReferencePicker`. |
| Insert collection link | Allow linking to a collection inside the editor. |

---

## 12. **Admin Panel Enhancements** – 🟡

| Feature | Status |
|---------|--------|
| User management (list, delete) | 🟡 Exists in `AdminPage` but styling/table missing? |
| Article management (list, delete) | 🟡 Exists. |
| RAG document management (list, delete) | 🟡 Exists (call `/api/admin/rag/documents`). |
| Notification stats | 🟡 Exists (`/api/admin/notifications/stats`). |

No major new code – just verify.

---

## 13. **Progressive Web App (PWA) / Offline Support** – 🔴 (optional)

| Feature | Needed Work |
|---------|--------------|
| Service worker | Not implemented. |
| `OfflineCollaborationQueue` component | 🟡 Exists but never used – needs to be integrated into `ChatArea` or global layout. |

---

## ✅ **Summary of What You Need to Build on Frontend**

| Priority | Feature | Deliverable |
|----------|---------|--------------|
| **High** | **Unified Inbox** | Test and fix any issues; add missing filter UI. |
| **High** | **Paper Collections** | Create `CollectionsPage`, `AddToCollectionModal`, and integrate with article pages. |
| **High** | **Reference Manager** | Create `ReferenceManagerPage`, import modal, citation picker in editor. |
| **High** | **Preprint Submission** | Complete `PreprintSubmissionPage` with full form and screening. |
| **High** | **Recent Items** | Implement `GET /api/recent-items` on backend (if not) and wire in `App`. |
| **Medium** | **Provenance** | Add `ProvenanceTimeline` component to article/view pages. |
| **Medium** | **Scheduled Messages UI** | Ensure `ScheduleModal` and `ScheduledMessagesPanel` work. |
| **Medium** | **User Liked Articles** | Fix endpoint call. |
| **Low** | **Export** | Implement backend export – frontend already ready. |
| **Low** | **Global Search** | Wire modal to search endpoints. |
| **Low** | **PWA / Offline** | Optional. |

---

**Final note:**  
The frontend **hooks** for all these features are already written. You only need to **create the missing UI pages/components** and **wire them into the existing app** (routes, navigation, buttons). Once you do that, your frontend will be 100% complete against your backend API.















---

## ✅ **Fully Implemented Frontend (Production‑Ready)**

These features have working hooks, components, and pages; they only require backend endpoints (which you now have).

| Feature Area | Frontend Components / Hooks | Status |
|--------------|----------------------------|--------|
| **Authentication & User** | `useAuth`, `LoginPage`, `RegisterPage`, `useRegister`, `usePasswordReset`, `useProfile`, `usePublicProfile`, `ProfileModal`, `IdentityVerificationPanel` | ✅ |
| **Follow System** | `usePublicProfile`, `useRecommendations` (suggested users), `FollowersPage`, `FollowingPage` | ✅ |
| **Articles (CRUD, search, comments)** | `useArticle`, `useArticles`, `useSearch`, `ArticlesPage`, `ArticleDetailPage`, `CreateArticlePage`, `ArticleBody`, `CommentSection` | ✅ |
| **Messaging (private & group)** | `useMessaging`, `ChatSidebar`, `ChatArea`, `MessageBubble`, `GroupInfoPanel`, `GroupMembersModal`, `GroupManagementModal`, `VoiceRecorder`, `PollBubble`, `MentionInput`, `VideoCallModal` | ✅ |
| **Real‑time WebSocket** | `useWebSocket`, `useSignaling`, `WebSocketManager` (internal) | ✅ |
| **Notifications** | `SmartNotificationCenter`, `NotificationDropdown`, `useNotifications` | ✅ |
| **Recommendations & Discovery** | `useRecommendations`, `useRecommendationFeed`, `RecommendationsFeed`, `TrendingArticles`, `DiscoveryFeedWidget` | ✅ |
| **RAG Assistant** | `useRagSystem`, `RagAssistantPanel`, `RagDocumentUpload`, `RagCitationBlock` | ✅ |
| **Lab Inventory** | `useLabInventory`, `LabInventoryDashboard`, `ChemicalFormModal`, `BarcodeScannerModal`, `NFPA704Diamond`, `ChemicalDetailPanel` | ✅ |
| **Peer Review** | `usePeerReview`, `PeerReviewDashboard`, `ReviewForm`, `ReviewerCredentialsForm` | ✅ |
| **Gap Analysis** | `useGapAnalysis`, `GapAnalysisDashboard`, `KnowledgeGraphCanvas`, `GraphSearchBar`, `GraphLegend` | ✅ |
| **Projects & Tasks** | `useProjectSpace`, `useProjectTaskManager`, `ProjectWorkspacePage`, `ProjectMembersPanel`, `ProjectTasksPanel`, `ProjectReferenceLibrary` | ✅ |
| **Data Hub (Protocols, Preregistrations)** | `useProtocolsWorkspace`, `usePreregistration`, `useResearchObjectRepository`, `ProtocolsWorkspace`, `PreregistrationForm`, `ResearchObjectList` | ✅ |
| **Events** | `useEventHosting`, `EventPage`, `EventCard`, `ActivityFeed` | ✅ |
| **Workspace (SmartGlass)** | `useSmartGlassWorkspace`, `SmartGlassWorkspace`, `PanelManager`, `WebBrowserPanel` | ✅ |
| **Voice Assistant & Settings** | `useVoiceAssistant`, `VoiceAssistantWidget`, `VoiceSettingsModal`, `VoiceCommandHint`, `VoiceTranscriptPanel`, `VoiceMessageButton` | ✅ |
| **Admin Dashboard** | `AdminPage` (stats, users, articles, activity, RAG docs) | ✅ |
| **Analytics** | `usePaperAnalytics`, `AnalyticsPage`, `ViewsChart`, `StatsCards` | ✅ |
| **Polls & Quizzes** | `usePoll`, `PollBubble`, `PollCreateModal`, `PollResults` | ✅ |
| **Two‑Factor Authentication** | `useSecuritySettings`, `TwoFactorSetupModal` | ✅ |
| **Export (HTML only)** | `SubmissionExportPanel` (calls backend, works if backend ready) | ✅ |
| **Command Palette** | `CommandPaletteProvider`, `usePredictiveActions`, `CommandPalette` | ✅ |
| **Offline Queue (basic)** | `useOfflineSync`, `OfflineCollaborationQueue` component | ✅ (component exists but not integrated everywhere) |

---

## 🟡 **Partially Implemented / Needs Integration**

These features have the hooks and some UI, but are not fully wired into the app or lack certain components.

| Feature | Status | Needed Work |
|---------|--------|--------------|
| **Paper Collections** | 🟡 Hook `usePaperCollections` exists; no UI page | Create `CollectionsPage`, `CollectionDetailPage`, `AddToCollectionModal`. Integrate with article pages (add “Save to collection” button). |
| **Reference Manager** | 🟡 Hook `useReferenceManager` exists; no UI | Build `ReferenceManagerPage`, `ReferenceImportModal` (DOI/BibTeX/Zotero), `ReferencePicker` for rich editor. |
| **Preprint Submission** | 🟡 `PreprintSubmissionPage` exists but is a stub | Complete the submission form (title, abstract, authors, manuscript upload, cover letter). Add screening feedback UI. |
| **Provenance / Trust** | 🟡 Hook `useProvenance` exists; `ProvenanceTimeline` component present | Integrate timeline into article/detail pages. Add “Verify chain” button. |
| **Unified Inbox** | 🟡 `UnifiedInboxPage` and `useUnifiedInbox` exist | Test and fix data mapping. Add missing filter UI (by origin, priority, date). |
| **Recent Items (Command Palette)** | 🟡 `App.tsx` fetches `/api/recent-items` but endpoint may be missing | Ensure backend returns `{ papers: [], contacts: [] }`. Uncomment fetch in `AppContent`. |
| **Global Search Modal** | 🟡 `GlobalSearchModal` exists, but not wired to search endpoints | Hook the modal to call `/api/conversations/search` (private) and `/api/groups/{groupId}/search`. Display message previews. |
| **Scheduled Messages** | 🟡 `ScheduleModal` and `ScheduledMessagesPanel` exist, not yet triggered | Add buttons in `MessagesPage` to open these modals. Ensure `useMessaging.scheduleMessage` is called. |
| **User Liked Articles** | 🟡 `LikedArticlesPage` exists; calls wrong endpoint | Change endpoint to `/api/users/${currentUsername}/liked-articles` or add backend alias. |
| **Collections & References in Editor** | 🟡 No UI in `ScientificEditor` toolbar | Add buttons to insert citations or collection links. |
| **PWA / Offline Support** | 🟡 `OfflineCollaborationQueue` component exists but not used | Integrate queue into `ChatArea` or global layout. Add service worker (optional). |

---

## 🔴 **Missing Frontend Components (Not Yet Built)**

These features have **no UI** at all – only backend endpoints.

| Feature | Missing Components |
|---------|---------------------|
| **Paper Collections UI** | `CollectionsPage.tsx`, `CollectionDetailPage.tsx`, `AddToCollectionModal.tsx` |
| **Reference Manager UI** | `ReferenceManagerPage.tsx`, `ReferenceImportModal.tsx`, `ReferencePicker.tsx` |
| **Preprint Submission UI** | Full `PreprintSubmissionPage.tsx` (complete form), `ScreeningResultCard.tsx` |
| **Provenance UI** | No dedicated page; need to embed `ProvenanceTimeline` in article/view pages |
| **Unified Inbox Filters** | Missing filter bar (`InboxFilterBar.tsx`) – we removed it earlier; need to re‑add. |
| **Scheduled Messages UI** | Buttons in `MessagesPage` and `ChatArea` to open modals; currently not rendered. |
| **Global Search UI** | No search results page; modal only shows chats but not messages. |
| **Admin Panel Enhancements** | User management table, article management table (stubs exist but not styled). |

---

## 📋 **Final Checklist – What You Must Build**

| # | Task | Priority |
|---|------|----------|
| 1 | **Create `CollectionsPage`** and integrate with article pages | High |
| 2 | **Create `ReferenceManagerPage`** and citation picker in editor | High |
| 3 | **Complete `PreprintSubmissionPage`** with full form | High |
| 4 | **Add provenance timeline** to article detail page | Medium |
| 5 | **Fix `LikedArticlesPage` endpoint** | Medium |
| 6 | **Wire scheduled messages UI** (buttons, modals) | Medium |
| 7 | **Implement global search** (hook to backend) | Medium |
| 8 | **Add missing filters to Unified Inbox** | Low |
| 9 | **Add “Save to collection” button** on article cards | Low |
| 10 | **Integrate offline queue** into chat | Optional |