ultra-vdr

As a Frontend Developer, I want a shared component library (Button, Badge, Card, Modal, Dropdown, Avatar, Tooltip, Spinner, EmptyState, Tag) aligned to the design tokens established in t1 so that all 15 page implementations pull from a single source of truth. Include a component index file and basic Storybook-style prop documentation in comments.

As a Backend Developer, I want a GET /sections/tree endpoint that returns the full nested section/subsection hierarchy with document counts per node, cached with a 60-second TTL, so that the Home and Sidebar pages load quickly with a single request.

As a Backend Developer, I want an Express middleware chain (authenticate → attachUser → requireRole(...roles)) that validates JWT tokens, attaches the user object, and enforces role-based access per route so that all API endpoints are consistently protected without ad-hoc checks in route handlers.

As a visitor, I want to see the ACCRA & TGR landing page that matches the Landing (v1) JSX design so that I understand the product value proposition and can navigate to Login. Wire CTA buttons to /login route. Apply design tokens from t1 and shared components from t2.

As a user, I want to see the updated Login (v2) JSX design with email/password fields, validation states, and error banners so that the auth entry point matches the approved design. Connect to the existing auth API. Apply design tokens and shared components.

As an authenticated user, I want the Sidebar (v2) JSX design rendered as a persistent left-nav component with collapsible section/subsection tree, role-aware menu items, active-state indicators, and a collapse toggle so that I can navigate the VDR efficiently. Sidebar must accept a sections data prop and emit navigation events.

As a Backend Developer, I want REST endpoints for documents (POST /documents with multipart upload, GET /documents with filter/sort/pagination query params, GET /documents/:id, PATCH /documents/:id metadata, DELETE /documents/:id, POST /documents/:id/versions) storing file metadata in PostgreSQL and files in the local abstracted storage layer so that document management is fully operational.

As a Backend Developer, I want REST endpoints (GET /users, POST /users/invite, PATCH /users/:id/role, PATCH /users/:id/status) that allow Admins to invite users by email, assign roles (Admin, InternalViewer, Investor), and activate/deactivate accounts, persisted in PostgreSQL, so that access control is manageable.

As a Backend Developer, I want CRUD endpoints for tags (GET /tags, POST /tags, DELETE /tags/:id) and document-tag association endpoints (POST /documents/:id/tags, DELETE /documents/:id/tags/:tagId) so that theme tags can be maintained independently and applied to documents.

As a Frontend Developer, I want a configured React Query client with default retry/stale-time settings, an Axios instance with JWT interceptor (auto-attach token, auto-refresh or logout on 401), and a Zustand or Context store for auth state so that all API calls across the app share consistent behavior.

As an Investor or Internal Viewer, I want the Home (v1) JSX page to display a card grid of top-level sections with thumbnail, title, document count, and last-updated date so that I can quickly orient myself and navigate into a section. Use mock data initially; wire to API after t20 is complete.

As an Admin, I want the Dashboard (v1) JSX page showing KPI cards (total documents, active users, recent uploads, pending reviews), a recent-activity feed, and quick-action buttons so that I have an operational overview. Use mock data initially; wire to API after t24 is complete.

As an Admin, I want the Sections (v1) JSX page with a tree view listing all sections and subsections, inline create/rename/delete controls, drag-to-reorder, and a detail panel so that I can manage the VDR information architecture. Use mock data initially; wire to API after t19 is complete.

As an Investor or Internal Viewer, I want the Section (v1) JSX page showing a section overview (description, document count, sub-sections list, recently added documents) so that I understand what is available before drilling into documents. Wire to API after t20 and t21 are complete.

As any authenticated user, I want the Documents (v2) JSX page with a filterable/sortable table of documents (title, section, tags, status, version, date, confidentiality) and bulk-action toolbar so that I can manage or browse the document library. Investors see only non-confidential docs. Wire to API after t21 is complete.

As an authenticated user, I want the Document (v2) JSX page with an in-browser PDF/DOCX/PPTX/XLSX preview panel, metadata sidebar, version history list, download button, and an Internal Notes section (visible to Admin and Internal Viewer only) so that I can review and annotate documents. Wire to API after t21 and t22 are complete.

As an Admin, I want the Kanban (v2) JSX page with drag-and-drop columns (Draft, Under Review, Approved, Archived) where each card shows document title, section, assignee avatar, and tag chips so that I can manage document review workflows visually. Wire to API after t21 is complete.

As an Admin, I want the Users (v2) JSX page with a table of users (name, email, role, last login, status), an invite modal, a role-change dropdown, and deactivate/reactivate actions so that I can manage access control. Wire to API after t23 is complete.

As an Admin, I want the Import (v1) JSX page with a JSON file drop-zone, schema validation preview table, error/warning row highlights, and a confirm-import button so that I can bulk-load sections and documents via structured JSON. Wire to API after t25 is complete.

As an Admin, I want the ActivityLog (v1) JSX page showing a chronological audit trail (user, action, resource, timestamp) with filters by user, action type, and date range so that I can review all VDR activity. Wire to API after t26 is complete.

As an authenticated user, I want the Search (v1) JSX page with a full-text search bar, type-ahead suggestions, filter chips (section, tag, file type, date range, confidentiality), and a loading state so that I can discover documents quickly. Wire to API after t27 is complete.

As a Backend Developer, I want endpoints POST /documents/:id/notes, GET /documents/:id/notes (Admin/InternalViewer only), and GET /documents/:id/download (with signed URL generation and activity log entry) so that internal annotations and secure downloads are supported.

As a Backend Developer, I want a GET /dashboard/stats endpoint returning total documents, active users, uploads in last 7 days, documents by status, and recent activity slice so that the Dashboard overview page has a single performant data source.

As a Backend Developer, I want a POST /import endpoint that accepts a JSON payload conforming to a documented schema (sections, subsections, documents with metadata), validates the payload, runs the import inside a database transaction, and returns a detailed result report (created, skipped, errored rows) so that bulk data loading is safe and auditable.

As a Backend Developer, I want a GET /activity endpoint with filters (userId, action, resourceType, startDate, endDate, page, limit) and an internal logActivity(userId, action, resourceType, resourceId, metadata) service function called by all write operations so that a full audit trail is queryable by Admins.

As a Frontend Developer, I want a reusable TagInput component (type-ahead, create-on-enter, color-coded chips) integrated into the document upload modal, the Document detail edit panel, and the Documents filter bar so that tags can be managed inline throughout the app.

As a Backend Developer, I want confidentiality level (public, internal, confidential, restricted) checked on every GET /documents and GET /documents/:id request so that Investors never receive confidential or restricted documents and Internal Viewers cannot access restricted documents, returning 403 for direct URL access attempts.

As an authenticated user, I want the Results (v2) JSX page displaying ranked search results with document title, section breadcrumb, matched-text snippet, file-type icon, and confidentiality badge so that I can evaluate relevance before opening a document. Wire to API after t27 is complete.

As a Backend Developer, I want a GET /search?q=&section=&tags=&fileType=&dateFrom=&dateTo=&confidentiality= endpoint using PostgreSQL full-text search (tsvector) on document title, description, and tag fields, with role-based result filtering (Investors excluded from confidential), returning ranked results with snippet extraction so that search is fast and secure.

As a Backend Developer, I want a PATCH /documents/:id/status endpoint accepting a status value (draft, under_review, approved, archived), validating allowed transitions, persisting the change, recording an activity log entry, and returning the updated document so that Kanban drag-and-drop operations are persisted.

As a Frontend Developer, I want the Sections page, Sidebar, Home, and Section detail components wired to the live sections API via React Query hooks, replacing all mock data, so that section CRUD operations and navigation reflect real data.

As a Frontend Developer, I want the Documents list, Document detail, and Section detail pages wired to the live documents API with upload progress indicators, optimistic UI updates, and error handling so that document management is fully end-to-end functional.

As a Frontend Developer, I want the Users page wired to the user management API so that invite, role-change, and deactivate actions call real endpoints, refresh the table on success, and display inline validation errors.

As a Frontend Developer, I want the Import page wired to the bulk import API so that after JSON validation the confirm action posts to the API, shows a progress state, and renders the per-row result report returned by the server.

As a Frontend Developer, I want the ActivityLog page wired to the activity API with working filter controls (user, action type, date range) and paginated infinite-scroll or pagination component so that Admins can audit all VDR activity from real data.

As a Frontend Developer, I want the Dashboard page wired to the /dashboard/stats API and the activity log API so that all KPI cards and the recent-activity feed reflect live data with auto-refresh every 60 seconds.

As a Frontend Developer, I want an in-browser document preview component that renders PDF files via react-pdf, DOCX/PPTX/XLSX via an iframe or mammoth.js/SheetJS, with a page navigator, zoom controls, and a fallback download-only state for unsupported types so that users can review documents without downloading.

As a Frontend Developer, I want a React Router v6 route-guard layer that reads the authenticated user's role (Admin, Internal Viewer, Investor) and redirects unauthorised access attempts to a 403 page so that role-specific pages are protected client-side. Cover all routes introduced in t3–t17.

As a Frontend Developer, I want the Kanban board wired to the live documents API and status update endpoint so that drag-and-drop column moves persist immediately, with optimistic updates and rollback on error.

As a Frontend Developer, I want the Search and Results pages wired to the search API so that query submission, filter application, and result rendering are driven by live data with debounced input, loading skeletons, and empty-state handling.

As a Backend Developer, I want a notification service that sends transactional emails (using nodemailer with SMTP config via environment variables) for user invitations (with a one-time setup link) and document approval status changes so that users are informed of key events.

As a Tech Lead, I want all Admin user-flow screens (Dashboard → Sections → Documents → Kanban → Users → Import → ActivityLog) smoke-tested end-to-end in a staging environment to verify no broken API calls, missing route guards, or UI regressions exist before the investor demo.

As a Tech Lead, I want the Investor and Internal Viewer flows (Login → Home → Sidebar → Section → Documents → Document Preview → Search → Results) smoke-tested end-to-end in staging, verifying confidentiality enforcement, internal-notes visibility, and download logging, so that the product is demo-ready.