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