VSM 2.0

As a Backend Developer, implement POST /api/upload endpoint in Node.js/Express to handle multipart file uploads for Excel, CSV, PDF, JPG, and PNG formats. Use multer for file handling with MAX_FILE_SIZE=50MB. For PDF/JPG/PNG files, pass to Tesseract.js OCR for text extraction. For Excel/CSV, use xlsx/csv-parse libraries. Parse extracted content into structured transaction rows and store in MongoDB as a BankStatement document. Return extracted transactions with predicted ledger mappings. Note: frontend tasks (UploadDropzone - fb79ebf4, UploadProgress - cb43bf33) depend on this API.

As a Backend Developer, implement Settings CRUD endpoints: GET/PUT /api/settings/app-config (appName, maxUploadSize, defaultExportFormat, ocrEnabled, aiLedgerPrediction, sessionTimeout), GET/POST/PUT/DELETE /api/settings/users (user management), GET/PUT /api/settings/permissions (role-permission matrix), GET/POST/PUT/DELETE /api/settings/templates (JV column mapping templates). All endpoints require JWT auth. Store configuration in MongoDB User and admin config collections. Note: frontend tasks (SettingsUserManagement - 7566d0ea, SettingsPermissions - 5b3f3d6c, SettingsAppConfiguration - ab9efcce, SettingsTemplateManagement - 6c1a5368) depend on these APIs.

As a Frontend Developer, fix the 404 error on post-login redirect by auditing AppRoutes.jsx. Ensure PrivateRoute wraps all authenticated pages (Dashboard, Upload, Preview, Export, LedgerMappings, Settings). Verify that useNavigate in LoginForm redirects to '/dashboard' (case-insensitive match). Check that all route paths in AppRoutes.jsx match the NavLinkItem hrefs in Navbar (case-sensitive). Add a catch-all 404 route. Confirm React Router v6 loader/action patterns are not mixed with v5 patterns. Remove any pricing-related route or page component from the routing tree.

As a Frontend Developer, configure api.js service with an Axios instance pointing to the Node.js backend (REACT_APP_API_URL env var, default http://localhost:5000). Add JWT token injection via request interceptor reading from localStorage/sessionStorage. Add response interceptor to handle 401 (redirect to /login), 403 (show permission error), and 500 (show toast notification). Implement authService.js with login(email, password), logout(), getCurrentUser(), and isAuthenticated() methods. Update AuthContext.jsx to use authService for auth state management and persist login state on page refresh.

Build the LandingHero section with a @react-three/fiber Canvas 3D scene. Implement LedgerSheet component using rotating box geometries (1.8×0.04×2.4) representing bank statement papers with MeshDistortMaterial, FloatingCoin using cylinder geometry with gold metallic material and bobbing useFrame animation, and DataStream with 40 FloatingParticle components using useFrame and Three.js Vector3 for positions cycling color between blue/coral/gold. Use @react-three/drei Float for ambient levitation. Layer framer-motion parallax scroll transforms on the non-canvas hero copy and CTA overlay.

Build the LandingProblemStatement section. Implement AnimatedCounter using requestAnimationFrame counting to 134 minutes (2h 14m display) with useInView hook for reset/restart on scroll entry. Add generateParticles(14) burst animation triggered when counter reaches target. Render painPoints array with lucide-react icons: Hourglass (Time Wasted), AlertTriangle (Manual Errors), Copy (Repetitive Work). Use iconContainerVariants with staggerChildren: 0.15 for staggered icon entrance. Wire framer-motion whileInView on the section container.

Build the LandingFeatures section with 6 FeatureCard components. Each FeatureCard uses useMotionValue for mouse-tracking glow effect, with borderColor useTransform switching to #1A73E8 on hover. Features use lucide-react icons: Upload, FileJson, Brain, Edit2, Users, Download. Apply AI-Powered badge on the Ledger Prediction / Brain feature card. Implement cardVariants stagger animation with delayChildren: 0.15. Wire whileInView trigger on the grid container with once: true.

Build the LandingWorkflow section with 6 workflow steps: Upload Statement → Parse & Extract → Review Data → Predict Ledgers → Export JV File → Import to E-Society. Implement separate MobileTimeline and DesktopTimeline components. Use StepRef wrapper components with useInView to track activeIndex state. Animate vertical line fill via height transition based on activeIndex. Render wf-step-number-ring animated SVG ring around each step number that activates on scroll entry. Apply step card entrance animations with framer-motion variants.

Build the LandingTrustBadges section with 6 BadgeCard components: 5+ file formats, <5 min processing, 256-bit SSL, AES-256 encryption, 99% accuracy, OCR-powered. Each BadgeCard uses infinite boxShadow pulse animation staggered by index * 0.3 seconds. Apply badgeVariants entrance with spring physics (stiffness: 350, damping: 25). Add parallax bg and mid decorative layers driven by the --scroll CSS custom property on the section container.

Build the LandingCTA section with scroll-linked gradient background using useScroll + useTransform. Animate gradientAngle from 135° to 195° and apply hueShift transform across the scroll range. Implement magnetic CTA button using getBoundingClientRect distance calculation with btnTransform state (x, y, scale) for pull physics on mouse proximity. Trigger generateParticles(22) burst animation on button click with setTimeout cleanup after animation completes.

Build the LandingFAQ section with 8 accordion FAQ items using AnimatePresence for expand/collapse. Animate ChevronDown icon rotation on active state toggle. FAQ questions cover: supported file formats, security model, ledger accuracy, E-Society integration, Member Info handling, export formats, post-export editing, and multi-user support. Implement single-open accordion logic with activeIndex state. Apply whileInView entrance on the FAQ list container with staggered item variants.

Build the Footer section with FooterLink components using hover underline animation via useMotionValue width transform. Render 4 link columns: Product, Application, Resources, Legal. Include social links for LinkedIn, Twitter, and GitHub with whileHover scale + rotate spring animations. Apply containerVariants with staggerChildren: 0.08 on the columns grid. Add parallax bg and mid decorative layers. Wire whileInView trigger with once: true, amount: 0.15 on the footer container.

As a frontend developer, implement the LoginForm section for the Login page. Features a VSM3DLogo sub-component rendering a React Three Fiber Canvas (camera position [0,0,4.5], fov 35) with a @react-three/drei Float wrapper containing a golden TorusKnotGeometry(0.6, 0.18, 100, 16) with metalness 0.85, a blue orbital TorusGeometry(1.0, 0.03) with emissive #1A73E8, and a coral accent TorusGeometry(1.15, 0.025) with emissive #FF6F61. Form state managed via useState with initialFormState (email, password, rememberMe). Validation via validateField function covering email regex and password min-length 6. State hooks: form, errors, touched, formError, loading, showPassword. emailRef auto-focuses on mount via useEffect. Password visibility toggle using Eye/EyeOff lucide-react icons. AnimatePresence handles error message entrance/exit animations. Loading state drives button disabled state and spinner. useNavigate from react-router-dom handles post-login redirect. Link component used for forgot password and sign-up navigation. Mail and Lock icons prefix input fields. AlertCircle icon accompanies inline field error messages.

As a Backend Developer, implement POST /api/auth/register endpoint to allow new users to create accounts. Accept email, username, and password fields. Validate input (email format, password strength min 8 chars, unique email). Hash password with bcrypt (rounds=12). Store new user in MongoDB User collection with is_active=true and role='user'. Return JWT token on successful registration. This fixes the account creation issue reported by users. Ensure CORS headers are set correctly for the frontend origin.

As a Frontend Developer, implement global state management using React Context API (or Zustand if complexity warrants it). Create the following contexts: AuthContext (user, token, login, logout, isAuthenticated), StatementContext (currentStatementId, uploadedFile, extractedTransactions, setStatementId), and NotificationContext (toasts array, addToast, removeToast). Wrap the app root in these providers in App.jsx. This ensures statementId flows from Upload → Preview → Export → LedgerMappings without URL param hacks. Also implement a ToastContainer component for displaying success/error/warning notifications globally.

As a Backend Developer, implement centralized error handling middleware for the Express.js backend. Create errorHandler.js middleware that catches all unhandled errors and returns standardized JSON responses: { success: false, error: { code, message, details } }. Define custom error classes: ValidationError (400), AuthenticationError (401), ForbiddenError (403), NotFoundError (404), ConflictError (409 for duplicate email/resource). Add request logging middleware using morgan. Add input sanitization middleware using express-validator for all POST/PUT endpoints. Ensure all existing API endpoint tasks (auth, upload, transactions, export, settings) use these middleware.

As a Backend Developer, implement a file storage service for uploaded bank statements and generated export files. Configure multer with disk storage, saving files to /uploads directory (with subdirectories per userId). Implement file cleanup service that deletes temporary processing files after 24 hours. Add file size validation (max 50MB per SRD). Store file paths in MongoDB BankStatement and ExportRecord collections. Implement GET /api/files/:fileId/download endpoint with JWT auth to securely serve stored files. Add .gitignore entry for /uploads directory.

As a Backend Developer, implement GET /api/health endpoint that returns system health status: { status: 'ok', timestamp, version, services: { database: 'connected'|'disconnected', ocr: 'available', ai: 'available' } }. Check MongoDB connection status via mongoose.connection.readyState. This endpoint should be unauthenticated and used by Docker health checks and deployment verification scripts. Also add GET /api/version returning the app version from package.json.

As a Backend Developer, implement password reset flow: POST /api/auth/forgot-password (accepts email, generates a time-limited reset token stored in MongoDB, sends reset link via email using nodemailer), POST /api/auth/reset-password (accepts token and new password, validates token expiry, updates hashed password in MongoDB, invalidates token). Configure nodemailer with SMTP settings from env vars. Token should expire in 1 hour. Return generic success messages to prevent email enumeration.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a @react-three/fiber Canvas containing a LedgerModel component — a 3D animated ledger/book built from boxGeometry meshes (coverGeom args [1.7, 0.1, 2.4], pageGeom args [1.55, 0.04, 2.2]) with a page stack layered at y offsets -0.08 to +0.04. The model continuously rotates on the Y-axis via useFrame (delta * 0.35). Materials use meshStandardMaterial with ledgerColor '#1A73E8', pageColor '#ffffff', and accentColor '#FFD700'. A cylinderGeometry spine accent and three boxGeometry page-line meshes decorate the top cover alongside a 'V' letter formed from two box meshes in gold. The scene is wrapped in a framer-motion container with a BookOpen lucide icon. Geometries are memoized with useMemo for performance.

As a frontend developer, implement the LoginForm section for the Login page. The form manages state via useState: form (email, password, rememberMe), errors, touched, formError, loading, and showPassword. On mount, emailRef.current.focus() auto-focuses the email field. validateField performs regex email validation (/^[^\s@]+@[^\s@]+\.[^\s@]+$/) and minimum 6-char password check. VSM3DLogo renders a @react-three/fiber Canvas with a @react-three/drei Float-wrapped group containing a golden torusKnotGeometry (args [0.6, 0.18, 100, 16]) with metalness 0.85, a blue torusGeometry orbit ring (args [1.0, 0.03, 16, 80]) with emissive '#1A73E8', and a coral accent ring (args [1.15, 0.025, 16, 80]) with opacity 0.7. Form fields use Mail and Lock lucide icons; password toggle uses Eye/EyeOff icons. AnimatePresence drives inline error message transitions. useNavigate handles post-login redirect. The form includes a 'rememberMe' checkbox and a Link to the forgot-password route.

As a frontend developer, implement the LoginFooterCTA section for the Login page. This section renders a full-width decorative banner with a @react-three/fiber Canvas background (AmbientScene) containing a Particles component of 60 points. Particle positions are generated via useMemo with Float32Array(count * 3) spread across an 8×3×2 unit space. useFrame animates mesh.current.rotation.y (clock.getElapsedTime() * 0.08) and rotation.x (sin * 0.04). pointsMaterial uses size 0.03, color '#1A73E8', opacity 0.5, blending=2 (AdditiveBlending), depthWrite false. The content layer overlays a subtle 'lfcta-separator' div, a 'New to Smart JV Creator?' prompt paragraph, and a React Router Link to '/Register' with class 'lfcta-link' for the hover underline animation.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page (task 8d7ebb9f-06e7-4c49-96e5-70cccbd9eca5) and should be reused if available. The Footer renders a ftr-root with two parallax decorator layers (ftr-bg-layer at -0.2px/scroll, ftr-mid-layer at -0.4px/scroll via CSS variable --scroll). A framer-motion div.ftr-grid uses containerVariants (staggerChildren 0.08, delayChildren 0.1) with whileInView trigger (once: true, amount: 0.15). Four linkColumns (Product, Company, Resources, Legal) are rendered as columnVariants (opacity 0→1, y 20→0, 0.5s easeOut). FooterLink components use useState(hovered) to drive a motion.span width animation (0→'100%', 0.3s easeInOut). Social icons (Linkedin, Twitter, Github from lucide-react) are rendered as anchor links. copyrightVariants fade in with 0.6s delay 0.7s. useAnimation controls are wired to onViewportEnter.

As a frontend developer, implement the Navbar section for the Dashboard page. This component (Navbar.css) may already exist from Landing and Login pages. It uses framer-motion's useScroll and useTransform for scroll-driven logo scale/opacity animations (logoScale: [1,0.92,0.85], logoOpacity: [1,0.9] over scrollY [0,120]). Includes NavLinkItem sub-component with AnimatePresence-driven underline scaleX animation on hover/active state, LogoSVG with a custom SVG (rect, path, circle elements), isScrolled state toggling 'nb-scrolled' class at 60px scroll threshold, mobile menuOpen state with body overflow lock, and a hamburger/close toggle. NAV_LINKS array includes 7 routes: Landing, Dashboard, Upload, Preview, Export, LedgerMappings, Settings. Verify the 'Dashboard' link renders as active via activePage prop.

As a Backend Developer, implement POST /api/members/upload endpoint to accept an Excel file containing member information (member name, wing, unit, account number). Parse the file using xlsx library and store records in MongoDB MemberInfo collection. Implement GET /api/members to retrieve all member records for the current user. Member data should be used to enrich transaction predictions. Note: frontend task (MemberInfoSection - 8e0a5be5) depends on this API.

As a Backend Developer, implement transaction management endpoints: GET /api/transactions/:statementId (fetch transactions for a statement), PATCH /api/transactions/:id (update ledger, jvType, or other fields for a single row), DELETE /api/transactions/:id (delete a transaction row), PATCH /api/transactions/:statementId/bulk (bulk update multiple rows). All endpoints require JWT auth middleware. Store edits and corrections in MongoDB Transaction collection. Note: frontend tasks (PreviewTable - f68512f6, PreviewActions - aa97d4f9) depend on these APIs.

As a Backend Developer, implement GET /api/dashboard/stats endpoint returning aggregated statistics: total conversions, pending uploads, total exports, total JVs generated. Implement GET /api/dashboard/recent-activity returning the 10 most recent bank statement upload records with status, fileType, and fileName. Implement GET /api/dashboard/upload-status returning in-progress uploads with progress percentage. All endpoints require JWT auth and query MongoDB for the current user's data. Note: frontend tasks (DashboardStats - 0146dce8, DashboardRecentActivity - b0e071a0, DashboardUploadStatus - 76baf46d) depend on these APIs.

As a Backend Developer, implement data management endpoints: GET /api/data/stats (totalFiles, totalTransactions, storageUsed), POST /api/data/export-all (export all user data as ZIP), DELETE /api/data/clear-temp (clear temporary processing files), DELETE /api/data/clear-old (clear files older than N days), POST /api/data/reset (full database reset for the user). All endpoints require JWT auth. Implement storage calculation by querying MongoDB and file system. Note: frontend task (SettingsDataManagement - 4b506b01) depends on these APIs.

As a Frontend Developer, implement a Register page with a form for email, username, and password fields. Reuse the VSM3DLogo 3D component from LoginForm. Include client-side validation (email regex, password min-length 8, confirm password match). On successful registration, redirect to /dashboard. On error, display inline error messages with AnimatePresence. Include a link back to /login. Ensure React Router route /register is added to AppRoutes.jsx and is publicly accessible (no PrivateRoute guard).

As a Backend Developer, implement a WebSocket server (using socket.io or ws library) on the Node.js backend to push real-time upload and OCR processing progress events to the frontend. Emit events: upload:progress (percentage 0-100), upload:ocr_start, upload:ocr_progress (page count for PDFs/images), upload:complete (returns statementId), upload:error (error message). Authenticate WebSocket connections using the JWT token passed as a query param. This enables UploadProgress (cb43bf33) to show real processing status instead of mocked values.

As a Backend Developer, implement column mapping endpoints: POST /api/mapping/detect (auto-detect column positions in uploaded file headers and return suggested mappings), POST /api/mapping/save (save confirmed column mapping config to BankStatement document), GET /api/mapping/:statementId (retrieve saved mapping for a statement). The detect endpoint should use heuristics to match common column names (Date, Narration, Debit, Credit, Balance) across different bank formats (HDFC, ICICI, SBI, Axis, Canara, HSBC). Store confirmed mappings in BankStatement.columnMapping field. This enables the Upload flow to correctly map diverse bank statement formats.

As a Backend Developer, implement API security hardening: add express-rate-limit middleware (100 req/15min per IP for general routes, 10 req/15min for auth routes to prevent brute force), add helmet.js for HTTP security headers (CSP, HSTS, X-Frame-Options), add CORS configuration restricted to allowed frontend origins (FRONTEND_URL env var), add express-mongo-sanitize to prevent NoSQL injection, add hpp for HTTP parameter pollution protection. Configure environment-based CORS: localhost:3000 for development, production domain for staging/prod.

As a frontend developer, implement the Sidebar section for the Dashboard page using Sidebar.css. Uses lucide-react icons (LayoutDashboard, Upload, Eye, FileSpreadsheet, Settings, BookOpen, LogOut, Menu, X, ChevronLeft, Zap). Manages three state hooks: collapsed (toggles 'sb-collapsed' class), mobileOpen (toggles 'sb-mobile-open' and 'sb-overlay-visible'), and activeHref (initialized to '/Dashboard'). Includes a collapsible chevron button, brand section with Zap icon and 'Smart JV Creator / VSM 2.0' text, navMain array (Dashboard, Upload, Preview, Export) and navSecondary array (Ledger Mappings with 'AI' badge, Settings). Renders a mobile overlay div that closes sidebar on click, and a mobile toggle button with X/Menu icon swap. All toggle handlers use useCallback for optimization.

As a frontend developer, implement the DashboardHeader section for the Dashboard page using DashboardHeader.css. Features a Three.js/React Three Fiber 3D accent scene (AccentCanvas) with AccentGeometry component using @react-three/drei Sphere and Torus. The Sphere bobs via Math.sin on Y axis, Torus rotates on Z and pulses scale, parent group rotates on Y and sways on X — all driven by useFrame clock. Uses meshStandardMaterial with emissive on both shapes (#1A73E8 sphere, #FF6F61 torus). The main component accepts role ('accountant'|'admin'|'user'), onRoleChange, and personas props. ROLE_CONFIG maps roles to lucide-react icons (Briefcase, ShieldCheck, UserCheck) and CSS classes. formattedDate is memoized via useMemo displaying full weekday/month/day/year. Canvas camera at [0,0,3.2] with fov 35, ambient + two directional lights.

As a frontend developer, implement the DashboardStats section for the Dashboard page using DashboardStats.css. Renders 4 stat cards from the STATS array (conversions=1247, pending=23, exports=986, jvs=3124) each with trend direction (up/down), period label, and theme color. Each card contains a React Three Fiber Canvas with a Suspense-wrapped 3D icon scene — shape type determines which component renders: RotatingBox (boxGeometry 1.4³), RotatingRing (torusGeometry [0.9,0.35,16,24]), RotatingTorus (torusKnotGeometry [0.7,0.25,48,10]), or RotatingCone (coneGeometry [0.85,1.6,6]). All shapes use useFrame for continuous rotation with unique axis offsets. Cards use framer-motion for entrance animations. meshStandardMaterial with metalness/roughness applied per shape.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page using DashboardQuickActions.css. Features a BackgroundScene Three.js canvas with 5 FloatingGeometry meshes using @react-three/drei Float wrapper — geometry types: torus, icosahedron, octahedron, ring, sphere — all with transparent meshStandardMaterial (opacity 0.18, depthWrite false). Each FloatingGeometry uses useFrame for sinusoidal Y position animation and per-axis rotation increments. Quick action buttons use lucide-react icons (Upload, FileText, Users, ArrowRight, Settings, ShieldCheck, BarChart3, FileSpreadsheet) and framer-motion for hover/tap animations. The main DashboardQuickActions component renders a grid of action cards with icon, title, description, and ArrowRight CTA. Canvas uses THREE.js Float for additional bounce.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page using DashboardRecentActivity.css. Renders 6 activityItems rows (HSBC, ICICI, SBI, HDFC, Axis, Canara bank statements) with fileName, uploadDate, status (Completed/Processing/Failed/Pending), fileType (xlsx/csv/pdf/img), and type (Upload/OCR Upload/Export). Uses statusClassMap and fileTypeClassMap for CSS badge classes. Features an ActivityRing Three.js component: TorusGeometry ring (r=1.4, tube=0.06) with 5 orbiting SphereGeometry dots (r=0.12) whose angles advance via useFrame clock per-dot speed offsets. groupRef sways on Z via Math.sin, ringRef rotates on X and Y axes. Action buttons use lucide-react (Eye, Edit3, Download, Clock, FileText). framer-motion used for row entrance animations (staggered via motion.div).

As a frontend developer, implement the DashboardUploadStatus section for the Dashboard page using DashboardUploadStatus.css. Includes a ProgressRingCanvas using React Three Fiber with a ProgressRing component built from @react-three/drei Torus (args [0.85,0.12,16,64]) — renders a background track torus, a filled arc torus (color changes to '#2E7D32' at progress>=1 vs '#1A73E8'), and a sphere cap mesh positioned at Math.cos/sin(angle - PI/2)*0.85 as the arc leading edge. ProgressRingCanvas camera at [0,0,2.2] fov 45, dpr [1,2], alpha true. FILE_ICONS maps extensions (xlsx, csv, pdf, png, jpg) to lucide-react icons (FileSpreadsheet, FileText, FileImage). Uses useState and useCallback for upload card state management, AnimatePresence for card mount/unmount animations, and formatEta helper for ETA display. Clock icon used for pending items, X for cancellation.

As a frontend developer, implement the DashboardLedgerPredictions section for the Dashboard page using DashboardLedgerPredictions.css. Features an AccuracyGauge component built with raw THREE.js WebGLRenderer (no R3F) — creates renderer imperatively via containerRef, sets dpr up to 2, alpha true, absolute positioning. Displays stats: ACCURACY_PCT=87, TOTAL_PREDICTIONS=246, CORRECTLY_MATCHED=214, IMPROVEMENT=12. PREDICTION_ROWS (5 rows) and HISTORY_ROWS (4 rows) each contain date, description, predictedLedger, actualLedger, and status ('matched' or 'corrected'). Three SUGGESTIONS strings displayed as improvement tips. Uses framer-motion AnimatePresence for tab switching between current predictions and history. useState tracks active tab and expanded rows. Matched rows styled differently from corrected rows to highlight AI prediction accuracy. Framer-motion motion.div used for row stagger animations on tab change.

As a frontend developer, implement the Footer section for the Dashboard page using Footer.css. This component may already exist from Landing and Login pages. Uses framer-motion containerVariants (staggerChildren 0.08, delayChildren 0.1) with columnVariants (opacity 0→1, y 20→0, duration 0.5) and copyrightVariants (opacity 0→1, delay 0.7). Renders 4 link columns (Product, Company, Resources, Legal) each with 3 FooterLink items that use useState(hovered) to drive a motion.span underline animating width 0→100% (duration 0.3). socialLinks render Linkedin, Twitter, Github lucide-react icons. Footer has ftr-bg-layer and ftr-mid-layer parallax divs with CSS var(--scroll) translateY. Uses useAnimation controls for viewport-triggered whileInView='visible' on the ftr-grid motion.div.

As a frontend developer, implement the UploadPageHeader section for the Upload page. This section renders a Three.js ParticleCanvas using WebGLRenderer with 60 animated SphereGeometry particles (blue, varying opacity 0.18–0.55), each with sine/cosine float animation driven by per-dot speed, amplitude, and phase userData. The header includes a breadcrumb with ChevronRight and step indicator (CURRENT_STEP=1 of TOTAL_STEPS=3), a format badge row rendering FORMATS array (Excel/CSV/PDF/JPG/PNG) with lucide icons (FileSpreadsheet, FileText, FileImage, File), and section title/subtitle text. The Navbar component may already exist from the Dashboard page. Wire depends_on to the Dashboard Navbar task to establish page chain.

As a frontend developer, implement the LedgerMappingsHeader section for the LedgerMappings page. This section includes: (1) a DecorativeDots component rendering 8 colored span dots (blue/gold/coral) as a bg-dots pattern; (2) a WorkflowSteps component with 4 steps (Upload→done, Preview→done, Ledger Mappings→active, Export→pending) each using lucide-react icons (Upload, FileText, Layers, Download), CheckCircle for done steps, anchor links for done/pending steps via href props, and connector divs with lmh-wf-conn-done class on completed connectors; (3) a Breadcrumb nav with links to /Dashboard, /Upload, /Preview and current span for Ledger Mappings; (4) a StatCard sub-component accepting icon, iconClass, value, label props for header-level stats. All styled via LedgerMappingsHeader.css with classes: lmh-bg-dots, lmh-dot, lmh-workflow, lmh-workflow-step, lmh-wf-done/active/pending, lmh-wf-icon-wrap, lmh-wf-label, lmh-wf-connector, lmh-breadcrumb, lmh-breadcrumb-sep, lmh-breadcrumb-current, lmh-stat-card. Note: Navbar may already exist from Preview page (task 6eb6f49f). Depends on Dashboard page task for page-chain.

As a frontend developer, implement the MappingStats section for the LedgerMappings page. This section contains: (1) a ConfidenceChart sub-component rendering a static horizontal bar chart with 3 rows (HIGH=68, MED=47, LOW=12) using inline styles for bar fill width calculated as (value/maxVal)*100% and color tokens (#4CAF50 green, #FFA500 orange, #FF6F61 coral) with translucent bg variants; (2) a StatCard sub-component accepting icon (lucide-react), label, value, valueColor, accentClass, iconBgClass props rendering colored accent-bordered cards; (3) the main MappingStats component rendering a ms-grid with 4 StatCards — Total Predictions (BarChart3, '127', blue), Accuracy Rate (Target, '94.2%', gold), Confirmed (CheckCircle, '89', green), Pending Review (Clock, '38', coral) — plus a ms-chart-card containing ConfidenceChart with header 'AI Confidence Distribution'. All styled via MappingStats.css with classes: ms-root, ms-inner, ms-grid, ms-card, ms-card-accent-blue/gold/green/coral, ms-card-icon-wrap, ms-card-label, ms-card-value, ms-chart-card, ms-chart-header, ms-chart-canvas-wrap, ms-chart-bars, ms-chart-bar-row, ms-chart-bar-label, ms-chart-bar-track, ms-chart-bar-fill, ms-chart-bar-value. No state hooks — fully static display.

As a frontend developer, implement the ConfirmationPanel section for the LedgerMappings page. This section contains: (1) a ConfirmationRing sub-component rendering a static SVG with 3 concentric circles (r=22 blue stroke, r=16 gold stroke, r=6 coral fill) with opacity values; (2) three useState hooks — acceptAll (boolean, default false), exportFormat (string, default 'XLSX'), dismissedWarning (boolean, default false); (3) derived values: confirmedCount = acceptAll ? 127 : 89, pendingCount = 127 - confirmedCount, highConfidenceUnreviewed = 12; (4) a conditional warning banner (showWarning = !dismissedWarning && highConfidenceUnreviewed > 0 && !acceptAll) with inline SVG triangle-warning icon, message about 12 high-confidence unreviewed predictions, and dismiss button (sets dismissedWarning=true) with inline SVG X icon; (5) cp-inner action bar with cp-left containing an 'Accept All' checkbox (onChange sets acceptAll) and summary counts; (6) an exportFormat selector with 'XLSX' default; (7) handleExport guard that returns early if !acceptAll && pendingCount > 0. All styled via ConfirmationPanel.css with classes: cp-root, cp-warning, cp-inner, cp-left, cp-checkbox-label, cp-ch (truncated in source). This is the primary interactive confirmation/export control for the LedgerMappings workflow.

As a frontend developer, implement the SettingsHeader section for the Settings page. This section renders a `<section className="sh-root">` containing a breadcrumb nav (Home / Settings), a page title with subtitle, and a 3D animated gear rendered via `@react-three/fiber` Canvas. The `Gear` component uses `THREE.Shape` with `ExtrudeGeometry` to build an 8-tooth gear with a hole cutout and a `TorusGeometry` hub, both using `meshStandardMaterial` with metalness. The `useFrame` hook rotates the gear group continuously (`rotation.z += delta * 0.5`). The `GearScene` sets up ambient and directional lights with `alpha: true` canvas. Note: the Navbar component likely already exists from a previous page — reuse it here.

As a Backend Developer, implement POST /api/ledger/predict endpoint that accepts transaction narrations and returns ledger mapping predictions using GPT-5.4. Integrate OpenAI API client in Node.js. Use member info and historical corrections stored in MongoDB LedgerMapping collection to build context for the prompt. Implement GET /api/ledger/mappings to return all learned mappings with confidence scores. Implement POST /api/ledger/confirm to save user corrections back to the LedgerMapping collection for continuous learning. Note: frontend tasks (DashboardLedgerPredictions - 3514a3e5, PreviewLedgerPanel - 57f68168, MappingStats - 515d767c, ConfirmationPanel - 8cf9b22e) depend on this API.

As a Backend Developer, implement POST /api/export endpoint to generate E-Society compatible JV import files. Accept statementId, exportFormat (XLSX/CSV), and column mapping config. Use xlsx library to generate XLSX output and csv-stringify for CSV. Store export record in MongoDB ExportRecord collection. Implement GET /api/export/:id/download to stream the generated file back to the client. Note: frontend tasks (ExportFormatSelector - 0baa49d3, ExportActions - 6558509a, ExportPreview - 33bbb597) depend on this API.

As a Tech Lead, verify the end-to-end integration between the Login frontend implementation and the Auth backend API. Ensure the LoginForm (69f7996c) correctly calls POST /api/auth/login via authService, JWT is stored, AuthContext is updated, and useNavigate redirects to /dashboard without a 404 error. Verify PrivateRoute guards all protected pages and unauthenticated users are redirected to /login. Confirm logout clears the token and redirects correctly.

As a Frontend Developer, integrate socket.io-client (or native WebSocket) into the Upload page. Create a useUploadSocket custom hook that connects to the backend WebSocket server with the JWT token. Subscribe to upload:progress, upload:ocr_start, upload:ocr_progress, upload:complete, and upload:error events. Update UploadProgress (cb43bf33) component props (progress, isActive, isComplete) in real-time based on socket events. On upload:complete, store the returned statementId in app state (Context or Redux) for use by Preview page. Handle reconnection logic and cleanup on component unmount.

As a Frontend Developer, implement a ColumnMappingPanel component for the Upload page. This panel appears after a file is uploaded and displays detected column headers from the file. Users can confirm or override the auto-detected mappings via dropdowns (Date, Narration, Debit, Credit, Balance columns). Call POST /api/mapping/detect on file upload response to get suggestions. Show confidence indicators for auto-detected mappings. Save confirmed mappings via POST /api/mapping/save before proceeding to Preview. Integrate with StatementContext to store mappings. Add as a step between UploadDropzone and UploadFileDetails in the Upload page layout.

As a frontend developer, implement the UploadDropzone section for the Upload page. This section renders a drag-and-drop file input zone with useState hooks for dragActive, hovered, status ('idle'/'uploading'/'success'/'error'), progress (0–100), errorMessage, and selectedFile. It embeds a @react-three/fiber Canvas with RotatingParticleRing → UploadParticles (48 particles arranged in a ring via useMemo, color-coded: #FF6F61 error, #FFD700 success, #1A73E8 active, #B0C4DE idle). Uses framer-motion AnimatePresence for state transitions. Accepts ACCEPTED_FORMATS ('.csv,.xlsx,.xls,.pdf,.jpg,.jpeg,.png') with MAX_FILE_SIZE_MB=50 validation. On successful upload, emits MOCK_TRANSACTIONS (5 rows with date, description, type, amount, ledger, jvType fields) via onFileUploaded callback. Lucide icons: CloudUpload, CheckCircle, AlertCircle, FileText.

As a frontend developer, implement the MemberInfoSection section for the Upload page. This optional section renders a card with a decorative @react-three/fiber Canvas in the top-right corner containing a DecorativeAccent3D component — an octahedronGeometry(0.85, 0) mesh rendered twice: once with meshStandardMaterial (color #1A73E8, opacity 0.22) and once as a wireframe meshBasicMaterial (opacity 0.09), wrapped in @react-three/drei Float (speed=0.8, rotationIntensity=0.35, floatIntensity=0.25). The card header shows a FileSpreadsheet icon badge and an 'Upload Member Info' headline with an 'Optional' badge. State: file (File|null), dragOver (boolean) via useState. Implements handleDragOver, handleDragLeave, handleDrop, handleFileSelect, handleRemoveFile, handleDropzoneClick handlers. The dropzone shows a FileX icon and remove (X) button when a file is loaded, or an Upload icon with instructions when empty. Uses lucide icons: Upload, FileSpreadsheet, CheckCircle2, X, FileX.

As a frontend developer, implement the Navbar section for the Preview page. This component reuses the shared Navbar from previous pages (Login, Dashboard, Upload). It includes NAV_LINKS array with 7 routes (Landing, Dashboard, Upload, Preview, Export, LedgerMappings, Settings), a NavLinkItem component with framer-motion AnimatePresence underline animation on hover/active states, a LogoSVG component with animated rect/path/circle elements, scroll-based logo scale and opacity transforms via useTransform(scrollY, ...), isScrolled state toggling nb-scrolled class after 60px scroll, and a mobile menuOpen state that locks body scroll via document.body.style.overflow. The activePage prop should be set to 'Preview' to highlight the correct nav link.

As a frontend developer, implement the SettingsSidebar section for the Settings page. This `<aside>` component maintains `activeId` state (default `'users'`) and renders a vertical nav list of 5 categories: Users, Permissions, App Configuration, Templates, Data Management — each using lucide icons (Users, Shield, Sliders, FileText, Database). Each `SidebarItem` anchor uses smooth `scrollIntoView` on click and toggles `ssb-item--active` class. The sidebar also includes a 3D reactive `CrystalGeometry` using `@react-three/drei` `Octahedron` with `MeshDistortMaterial` (distort=0.25, speed=2.5, opacity=0.92). The crystal responds to global pointer position via `target.current` lerped in `useFrame`, and pulses with `Math.sin` scale animation. Depends on SettingsHeader for layout context.

As a Backend Developer, implement POST /api/esociety/import endpoint to facilitate direct data import into the E-Society Manager system. Accept statementId and E-Society credentials (baseUrl, username, password). Implement HTTP client calls to E-Society API using axios. Handle authentication with E-Society, map transaction data to E-Society JV format, and submit entries. Return import status and success/error counts. Note: frontend task (ExportESocietyIntegration - a15e19af) depends on this API.

As a Tech Lead, verify the end-to-end integration between the LedgerMappings frontend and the Ledger Prediction backend API. Ensure MappingStats (515d767c) and ConfirmationPanel (8cf9b22e) display real prediction data from GET /api/ledger/mappings, the Accept All action in ConfirmationPanel triggers POST /api/ledger/confirm for all pending mappings, and the export action in ConfirmationPanel triggers the export flow. Verify DashboardLedgerPredictions (3514a3e5) also reflects live prediction accuracy data.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend and the Dashboard Stats backend API. Ensure DashboardStats (0146dce8) fetches real aggregated stats from GET /api/dashboard/stats, DashboardRecentActivity (b0e071a0) fetches from GET /api/dashboard/recent-activity, DashboardUploadStatus (76baf46d) reflects real in-progress upload status, and DashboardLedgerPredictions (3514a3e5) shows live accuracy metrics. Confirm QuickAction navigation links route correctly to Upload, Preview, Export pages.

As a Tech Lead, verify the end-to-end integration between the Register frontend page and the Registration backend API. Ensure the register form calls POST /api/auth/register via authService, JWT is stored in localStorage/sessionStorage, AuthContext is updated, and useNavigate redirects to /dashboard. Confirm the LoginFooterCTA link to /register correctly navigates to the new Register page. Verify that duplicate email errors from the backend are displayed as user-friendly inline messages.

As a frontend developer, implement the UploadProgress section for the Upload page. This section renders a @react-three/fiber Canvas with a ProgressRing component built from THREE.TorusGeometry(1.15, 0.08, 32, 128) using clippingPlanes to mask the arc based on a progress prop (0–100). It includes a background track ring (opacity 0.2), an active progress arc (color #1A73E8 or #FFD700 when complete), a center Sphere (args [0.48, 32, 32], opacity 0.55 active / 0.3 idle), and an inner core Sphere (args [0.26, 24, 24]) visible when active. The ring animates rotation.y += 0.008 and rotation.z += 0.003 via requestAnimationFrame when isActive. A glow Sphere pulses via Math.sin(performance.now() * 0.0045). Uses @react-three/drei Sphere and Torus components with Suspense wrapper. Props: progress, isComplete, isActive.

As a frontend developer, implement the UploadFileDetails section for the Upload page. This section renders a file metadata panel (fileName, format, uploadedAt, transactionCount from FILE_DATA mock) alongside a @react-three/fiber Canvas with a FloatingDocument 3D scene — a Box(1.6×2.0×0.08) document body with a blue accent bar, edge highlight, and three line boxes, animated via useFrame with rotation.y sine wave (0.5 speed), rotation.x (0.3), and position.y float (0.7). Below the metadata, renders an editable transaction preview table of 5 previewRows with columns: date, description, type (credit/debit with ArrowUpCircle/ArrowDownCircle icons), amount, ledger (dropdown from LEDGER_OPTIONS — 10 options), jvType (dropdown from JV_TYPE_OPTIONS — 4 options), and Edit3/Trash2/Check/X action icons for inline row editing. Uses framer-motion AnimatePresence for row transitions. @react-three/drei: Box, Plane, Text (DreiText), OrbitControls.

As a frontend developer, implement the PreviewHeader section for the Preview page. This section renders a breadcrumb nav (Upload → Preview) using lucide-react ChevronRight and FileSpreadsheet/Calendar icons, displays fileName (HDFC_BankStatement_May2026.xlsx), uploadDate (21 May 2026), and rowCount (312) as props with defaults. The section includes a RowCountCube sub-component that mounts a Three.js WebGLRenderer inside a ref div, builds a BoxGeometry(1,1,1,2,2,2) with MeshStandardMaterial (color: 0x1A73E8), adds EdgesGeometry lines with 40% opacity, sets up AmbientLight and DirectionalLight, and runs a requestAnimationFrame loop rotating the cube on x (t*0.5) and y (t*0.7) axes. Full cleanup on unmount: cancelAnimationFrame, removeChild, dispose all geometries and materials.

As a frontend developer, implement the PreviewStats section for the Preview page. This section renders three stat cards from STATS_DATA array (Total Rows: 25, Valid Rows: 22, Rows with Errors: 3) using lucide-react icons (List, CheckCircle2, AlertCircle) with iconAccent classes (primary, green, coral) and valueClass color variants. The section also includes a ConfidenceRing sub-component built with Three.js: ExtrudeGeometry ring shape using THREE.Shape with absarc outer radius 1.6 and a hole path, extruded with bevel settings, tilted on rotation.x = Math.PI * 0.35, plus a ShaderMaterial glow plane behind the ring using a custom fragmentShader with smoothstep distance fade at alpha 0.12. The Percent lucide icon is also used. The renderer uses alpha:true background and animates via requestAnimationFrame.

As a frontend developer, implement the PreviewTable section for the Preview page. This is the most complex section, featuring 25 MOCK_ROWS with fields: id, date, narration, debit, credit, jvType, ledger, confidence, reference. It includes client-side pagination (PAGE_SIZE=10) with ChevronLeft/ChevronRight controls, inline row editing via useState for editingId and editRow with Edit3/Check/X lucide icons, row deletion with Trash2 icon, LEDGER_OPTIONS dropdown (15 options: Maintenance, Sinking Fund, Expense, etc.) and JV_TYPE_OPTIONS (Receipt, Payment, Contra, Journal). Confidence scores are color-coded and displayed with ArrowUpCircle (>=0.85 green) / ArrowDownCircle (<0.75 coral) / AlertTriangle (medium) icons. Row edits are saved via useCallback handlers. framer-motion AnimatePresence and motion.tr are used for row enter/exit animations.

As a frontend developer, implement the PreviewLedgerPanel section for the Preview page. This panel displays AI ledger predictions for 3 MOCK_PREDICTIONS entries, each with a narration and up to 3 suggestions (ledger, confidence, jvType). The PredictionCard sub-component uses useState for collapsed state with ChevronDown/ChevronUp toggle (aria-expanded). Each SuggestionBar sub-component is a framer-motion button with whileHover scale:1.01 and whileTap scale:0.98, showing a confidence percentage with color coding: green (>=80%), amber (>=55%), red (<55%). The fill bar animates from width:0 to width:`${pct}%` with duration:0.6 easeOut. Selected suggestions show a CheckCircle2 icon. There is also a Search input and a Zap icon for AI quick-apply. State for selectedLedgers is managed via useCallback onSelect handler. The panel uses useRef for scroll behavior.

As a frontend developer, implement the PreviewActions section for the Preview page. This is a sticky action bar with a Three.js ParticleCanvas background: OrthographicCamera(-1,1,1,-1), 40 particles with BufferGeometry using position and size attributes, a custom ShaderMaterial with uTime/uColor(#1A73E8)/uColor2(#FFD700) uniforms. The vertex shader uses gl_PointSize = size * 280.0 and alpha via sin(uTime * 1.8 + ...). The fragment shader mixes uColor and uColor2 with smoothstep circular clip and 0.35 max alpha. ResizeObserver handles canvas resize. Action buttons use lucide-react: RotateCcw (undo), RotateCw (redo), Download (export), Pencil (edit mode toggle), X (cancel). useState manages undoStack, redoStack, and editMode. framer-motion motion components handle button press animations. The bar uses useRef for container dimensions and useCallback for action handlers.

As a frontend developer, implement the Footer section for the Preview page. This component reuses the shared Footer already implemented for Login and Dashboard pages. It renders 4 linkColumns (Product, Company, Resources, Legal — each with 3 links to /Landing), social links (Linkedin, Twitter, Github from lucide-react), and a copyright line. framer-motion containerVariants uses staggerChildren:0.08 and delayChildren:0.1, columnVariants animate opacity:0/y:20 to opacity:1/y:0 over 0.5s, and copyrightVariants fade in at delay:0.7. FooterLink sub-component uses useState hovered and animates an underline span width from 0 to 100% on hover. Two parallax decorative layers (ftr-bg-layer, ftr-mid-layer) use CSS var(--scroll) transforms. whileInView with viewport once:true triggers the animation sequence.

As a frontend developer, implement the ExportHeader section for the Export page. This section renders a 3D pipeline visualization using @react-three/fiber with PipelineNodes component featuring 7 CatmullRom-curved nodes connected by a Line from @react-three/drei. Nodes use Sphere geometries with meshStandardMaterial colored #1A73E8 for completed steps and #BDBDBD for pending. The active node (CURRENT_STEP_INDEX=3) renders a gold ringGeometry glow ring using meshBasicMaterial with color #FFD700. useFrame animates node scale with sin oscillation. Float from @react-three/drei wraps the scene. A 5-step progress bar (Upload, Map Columns, Preview, Export, Complete) is rendered below the Canvas with the Export step highlighted as current.

As a frontend developer, implement the ExportFormatSelector section for the Export page. This section renders three format cards (XLSX, CSV, JSON) defined in the FORMATS array, each with a lucide-react icon (FileSpreadsheet, FileText, Code), badge label (Recommended on XLSX), sizeEstimate, and per-format options array. useState manages selectedFormat and per-format option toggles. A FloatingShapes 3D background renders 40 random Float32Array particle points via @react-three/fiber Canvas. AnimatePresence from framer-motion animates option panels expanding per selected format. CSV delimiter options render a select with four values (comma, semicolon, tab, pipe). CheckCircle2 and Info icons from lucide-react are used in card UI.

As a frontend developer, implement the ExportPreview section for the Export page. This section renders a scrollable data table of TRANSACTIONS array (20+ rows) with columns: date, desc, amount, type (credit/debit), ledger, jvType, wing, unit. useState manages sort column/direction, filter state, and pagination. A @react-three/fiber Canvas with useFrame provides animated background geometry. useMemo computes filtered and sorted transaction views. Credit rows styled in green, debit in red. Table supports column header click-to-sort. A summary row shows total credits vs debits. The component uses useRef for scroll container management.

As a frontend developer, implement the ExportAdvancedOptions section for the Export page. This section renders an accordion-style panel managed by useState (collapsed/expanded) with ChevronDown icon rotation via framer-motion AnimatePresence. Options include CheckboxOption and SelectOption sub-components with TooltipIcon (HelpCircle from lucide-react) showing framer-motion animated tooltip bubbles on hover/focus. An AccentCanvas renders a rotating OctahedronGeometry (THREE.OctahedronGeometry, scale 0.6) with meshStandardMaterial emissive #1A73E8 animated via useFrame (rotation.x and rotation.y). useCallback stabilizes option change handlers. useEffect syncs option state on format change.

As a frontend developer, implement the ExportMappingConfirmation section for the Export page. This section renders two panels: 3 UNMATCHED_RECORDS with confidence scores (72, 45, 88) and 142 virtualized MATCHED_RECORDS. Each unmatched record shows a ConfidenceRing 3D component — a useFrame-animated group rotating a ringGeometry arc whose color is #1A73E8 (>=70%), #FFD700 (>=45%), or a fallback red. Unmatched rows support inline ledger editing via a dropdown from CONFIGURABLE_LEDGERS (15 options) and JV_TYPES select, toggled by Pencil/X icons from lucide-react. AnimatePresence animates row expansion. CheckCircle2 and AlertTriangle icons reflect match status. useMemo computes confidence color and summary stats. useState tracks per-record override state.

As a frontend developer, implement the ExportESocietyIntegration section for the Export page. This section renders an E-Society direct integration panel with a DecorativeScene Canvas containing two sub-components: ParticleField (60-point Float32Array buffer geometry, useFrame rotating on Y and X axes, AdditiveBlending pointsMaterial #1A73E8) and ConnectionLines (two concentric rings of 16 points each, lineSegments geometry with sparse connections every 5th point, useFrame rotating on Z and Y). framer-motion AnimatePresence handles integration status state transitions (idle, connecting, success, error). useState manages connection credentials input fields and integration toggle. SVG icons are rendered inline for E-Society branding. useMemo computes ring geometry vertex arrays.

As a frontend developer, implement the SettingsUserManagement section for the Settings page. This section manages a users table with `INITIAL_USERS` array (Rajesh Kumar, Priya Sharma, Amit Patel, Sunita Desai with realistic Indian housing society emails, roles Admin/Accountant/User, Active/Inactive status). State includes `users`, `search`, `filterRole`, `editingId`, `newUserRow` (boolean), and `pendingDelete`. Features: search input filtering by name/email, role filter dropdown, inline row editing with save/cancel, add new user row form, and delete confirmation modal. The 3D `UserGroup3D` component renders 5 floating `UserGeo` spheres (using `sphereGeometry`) in a `group` that rotates continuously (`rotation.y += delta * 0.25`), each bobbing via `Math.sin` in `useFrame`. Uses `Suspense` fallback for the Canvas. Built inside `id="settings-users"` anchor target.

As a frontend developer, implement the SettingsPermissions section for the Settings page. This section renders a role-permission matrix with `ROLES` (Admin, Accountant, User) and `PERMISSIONS` (upload, preview, export, import_direct, edit_templates, manage_users, manage_members, system_config). State is `matrix` initialized from `DEFAULT_MATRIX` and `selectedRole` (default `'admin'`). A role selector tabs row allows switching active role. The matrix grid shows each permission as a toggle row with label, description, and animated checkbox using `framer-motion` (AnimatePresence for check icon). A `handleSave` triggers a `saved` toast. The 3D `ShieldCanvas` renders a rotating `octahedronGeometry` (args=[0.9,0]) with `meshStandardMaterial` (emissive `#0A3D7A`, emissiveIntensity=0.3) animating via `useFrame` (rotation.y += delta*0.35, rotation.x += delta*0.12). Built inside `id="settings-permissions"` anchor target.

As a frontend developer, implement the SettingsAppConfiguration section for the Settings page. State is `config` initialized from `INITIAL_CONFIG` (appName: 'VSM 2.0', supportEmail, maxUploadSize: '10MB', defaultExportFormat: 'XLSX', ocrEnabled: true, aiLedgerPrediction: true, sessionTimeout: 30) and `saved` boolean. Form fields include: text inputs for appName and supportEmail, select dropdowns for maxUploadSize (options: 5MB/10MB/50MB/100MB) and defaultExportFormat (XLSX/CSV), toggle switches for ocrEnabled and aiLedgerPrediction, and a number input for sessionTimeout. `handleSave` sets `saved` true then clears after 2000ms via `saveTimer` ref. The 3D decorative `DecorShape` uses `@react-three/drei` `Float` (speed=1.8) wrapping a `torusKnotGeometry` (args=[1,0.3,80,16]) with `MeshTransmissionMaterial` (transmission=0.95, iridescence=1, chromaticAberration=0.05). Built inside `id="settings-app-config"` anchor target.

As a frontend developer, implement the SettingsTemplateManagement section for the Settings page. State includes `templates` (4 entries: Default, Custom Template 1 for HDFC, Custom Template 2 for ICICI, Custom Template 3 for SBI), `selectedId`, `editingTemplate` (null or template object), and `deleteConfirm`. The template list renders cards with name, description, lastModified date, and isDefault badge. Selecting a card opens a detail panel showing `config` fields: column mappings (date/description/debit/credit/balance Excel column letters), jvTypeRule dropdown (5 options from `JV_TYPE_OPTIONS`), fieldValidation dropdown (4 options), and autoLedgerPredict toggle. Editing creates a draft copy with save/cancel. Delete triggers confirmation dialog. A 3D decorative scene uses `@react-three/fiber` with `Float`, `RoundedBox`, and `Line` from `@react-three/drei`, animating document-like shapes. Built inside `id="settings-templates"` anchor target.

As a frontend developer, implement the SettingsDataManagement section for the Settings page. State includes `alert` (null or {type, message}), `dialog` (null or action string), `deletePeriod` (default '30'), and `loading` object keyed by action. Stats are hardcoded: totalFiles=1247 (+38), totalTransactions=89532 (+1420), storageUsed='2.84 GB' (68% used). Three stat cards each have a dedicated `@react-three/fiber` Canvas: `FileCountViz` (stacked Box geometries with varying opacity), `TxViz` (three Cylinders), `StorageViz` (wireframe outer Box + filled inner Box). Action buttons: Export All Data, Clear Temp Files, Clear Old Files (with `deletePeriod` select using `DELETE_PERIODS` options 7/14/30/60/90 days), Reset Database (danger). Each action opens a `dialog` confirmation modal (AnimatePresence) and simulates async `loading` state. `alert` state renders success/error/warning banners using `lucide-react` icons (CheckCircle, AlertCircle, AlertTriangle). Built inside `id="settings-data"` anchor target.

As a Tech Lead, verify the end-to-end integration between the MemberInfoSection frontend (8e0a5be5) and the Member Info Upload backend API (5d0f69d6). Ensure the file dropzone posts the Excel file to POST /api/members/upload, the response confirms parsed member count, and the stored member data is subsequently used by POST /api/ledger/predict to enrich wing/unit predictions. Verify that uploading a member info file visibly improves ledger prediction confidence scores in the PreviewLedgerPanel (57f68168).

As a frontend developer, implement the UploadActions section for the Upload page. This section renders the bottom action bar with a primary 'Proceed' button (ArrowRight icon) and secondary 'Save Draft' (Save icon) and 'Cancel' (X icon) buttons. The primary button is surrounded by a PulseRingCanvas — a Three.js WebGLRenderer scene with a TorusGeometry(1.45, 0.03, 32, 100) ring and 40 BufferGeometry particles arranged in a circle (radius ~1.45), animated via requestAnimationFrame: ring.rotation.z += 0.003, ring.rotation.x/y sinusoidal tilt, particles.rotation.z -= 0.002, pulse scale via Math.sin(elapsed * 2.2) * 0.08, and opacity oscillation 0.35–0.55. Uses framer-motion useMotionValue, useSpring, useTransform for the primary button's magnetic hover effect (mouse tracking via useCallback). Includes window resize handler for renderer dimensions. Lucide icons: ArrowRight, Save, X.

As a frontend developer, implement the ExportActions section for the Export page. This section renders three action buttons: Download (handleExportDownload, 2500ms async simulation), Open in E-Society (handleExportOpen, 2800ms), and Save Draft (handleSaveDraft, 1800ms). useState manages isExporting and isSaving boolean states. lucide-react icons Download, Save, X, ExternalLink are used per button. framer-motion AnimatePresence animates loading spinner overlays within buttons during async operations. A ParticleField component renders 18 Float32Array particles with per-particle speeds array, animated via requestAnimationFrame in useEffect (particles float upward, wrapping at ±1.2 Y), with AdditiveBlending pointsMaterial. eSocietyEnabled state gates visibility of the E-Society open button.

As a Tech Lead, verify the end-to-end integration between the Upload frontend and the File Upload backend API. Ensure UploadDropzone (fb79ebf4) posts multipart form data to POST /api/upload, UploadProgress (cb43bf33) reflects real upload/processing progress via polling or WebSocket, MemberInfoSection (8e0a5be5) posts to POST /api/members/upload, and UploadFileDetails (1a91dbf8) renders the actual extracted transactions from the API response instead of mock data. Confirm OCR extraction works for PDF/JPG/PNG files.

As a Tech Lead, verify the end-to-end integration between the Preview frontend and the Transactions backend API. Ensure PreviewTable (f68512f6) fetches real transactions from GET /api/transactions/:statementId, inline edits call PATCH /api/transactions/:id, row deletions call DELETE /api/transactions/:id, and PreviewLedgerPanel (57f68168) displays predictions from GET /api/ledger/mappings. Confirm ledger selection confirms mappings via POST /api/ledger/confirm. Verify PreviewStats (4475bc5e) shows counts derived from real API data.

As a Tech Lead, verify the end-to-end integration between the Settings frontend sections and the Settings/Data Management backend APIs. Ensure SettingsUserManagement (7566d0ea) performs real CRUD via /api/settings/users, SettingsPermissions (5b3f3d6c) saves role-permission matrix via PUT /api/settings/permissions, SettingsAppConfiguration (ab9efcce) persists config via PUT /api/settings/app-config, SettingsTemplateManagement (6c1a5368) manages templates via /api/settings/templates CRUD, and SettingsDataManagement (4b506b01) calls /api/data/* endpoints with real confirmation dialogs.

As a Tech Lead, verify the end-to-end integration between the Export frontend and the Export/E-Society backend APIs. Ensure ExportActions (6558509a) triggers POST /api/export and then GET /api/export/:id/download to stream the file, ExportPreview (33bbb597) renders real transaction data from the API, ExportESocietyIntegration (a15e19af) correctly calls POST /api/esociety/import and handles success/error status transitions, and ExportMappingConfirmation (a5a3d8f1) reflects real unmatched records from the API.

As a Tech Lead, verify the end-to-end integration between the ColumnMappingPanel frontend and the Column Mapping backend API. Ensure POST /api/mapping/detect is called immediately after file upload with the file headers, returned suggestions are displayed with confidence scores, user overrides are correctly stored, and POST /api/mapping/save is called with confirmed mappings before the Proceed button navigates to Preview. Verify the full upload-to-preview pipeline: file upload → OCR/parse → column detection → mapping confirmation → transaction extraction → preview.