Early Salary Loan System

As a frontend developer, implement the Navbar section for the Login page. This component (Navbar.css) uses useState for mobileOpen and scrolled states, and useEffect to detect window.location.pathname for activePath highlighting and a passive scroll listener that toggles the nb-scrolled class at 8px. NAV_ITEMS array maps 8 routes (Dashboard, Applications, Application, Tracker, Audit Log, Agreement, Disbursement, Repayment) each with a lucide-react icon. Desktop renders nb-links ul with nb-active class on matching path. Right actions include a Sign In anchor to /Login and a hamburger button with aria-expanded toggling nb-open class across three nb-hamburger-line spans. A mobile drawer div toggles nb-drawer-open. Note: this component likely already exists from the Landing page — reuse/verify before recreating.

As a Backend Developer, implement the loan application REST API endpoints. Endpoints: POST /api/applications (create new loan application with full form data: name, mobile, email, employer info, salary, bank details, loan amount, purpose), GET /api/applications (paginated list with filters: status, date range, sort; for admin), GET /api/applications/{id} (full application detail), PUT /api/applications/{id}/status (update status: pending/under_review/approved/rejected/disbursed), PUT /api/applications/{id}/override (admin manual override: approve/reject/request-info with notes), GET /api/applications/{id}/timeline (status change history). Validate all input fields server-side. Note: Frontend tasks ApplicationWelcomeBanner, ApplicationsList, ApplicationsDetail, ApplicationsActions, and Application Detail Page sections depend on this API.

As an AI Engineer, implement the bank statement parser Python microservice. Capabilities: parse PDF bank statements (last 3 months) using pdfplumber or camelot; extract: monthly credit/debit totals, salary credit dates and consistency score, EMI obligations detected (recurring debits), bounce count (returned transactions), minimum balance trend, net savings rate. Output structured JSON: avgMonthlyCredit, avgMonthlyDebit, netSavingsRate, salaryConsistency (0-1), emiObligations (list of recurring amounts), bounceCount, minBalanceTrend (improving/stable/declining), rawTransactions. Expose as POST /api/ml/parse-bank-statement endpoint accepting PDF upload. Use Langchain document loaders where applicable. Store parsed results back to the loan application record. This is Phase 4 deliverable (Weeks 5-8).

As a Frontend Developer, set up global state management for the Early Salary Loan System using React Context API or Zustand. Stores needed: 1) AuthStore: user (id, name, email, role: employee/admin, token, refreshToken), login/logout actions, isAuthenticated; 2) ApplicationStore: currentApplication (id, status, data), setApplication action; 3) ThresholdStore: tLow, tHigh, budgetConfig, setThresholds, setBudget actions (for admin dashboard real-time updates); 4) NotificationStore: toast messages queue, addToast, removeToast. Configure axios/fetch interceptors to attach JWT Bearer token to all API requests and handle 401 responses by triggering token refresh or redirect to /Login. Set up protected route HOC (ProtectedRoute) that checks isAuthenticated and role before rendering pages.

As a DevOps Engineer, set up monitoring and alerting for the Early Salary Loan System. Tasks: 1) API uptime monitoring: configure health check endpoints GET /health for backend and ML service; set up Prometheus + Grafana or equivalent; 2) Error rate alerting: alert when 5xx rate exceeds threshold; 3) Model performance dashboard: track ML model prediction counts, score distributions, AUC over time, drift detection alerts; 4) Application-level metrics: loan application submission rate, approval/rejection rates, disbursement success rate; 5) Log aggregation: structured JSON logging from all services, centralized log viewer (ELK or CloudWatch); 6) Uptime alerts via email/Slack for service downtime. This supports the SRD requirement for monitoring model performance and API errors.

As a frontend developer, implement the LoginHero section for the Login page. This is a purely static section (LoginHero.css) rendering a section.lh-hero containing a decorative div.lh-accent-line, an h1.lh-headline with text 'Sign In to Your Account', and a p.lh-subheadline describing access to the Early Salary Loan System dashboard for loans, tracking, and salary advances. No state or interactivity — effort is minimal styling and layout.

As a frontend developer, implement the LoginForm section for the Login page. This interactive form (LoginForm.css) manages six useState hooks: email, password, rememberMe, showPassword, isSubmitting, errors ({email, password}), and successFields ({email, password}). Uses lucide-react icons Mail, Lock, Eye, EyeOff, LogIn. Implements real-time inline validation on change and blur: validateEmail checks for non-empty, regex-validates email format (/^[^\s@]+@[^\s@]+\.[^\s@]+$/) or 10-15 digit mobile (after stripping spaces/dashes/parens); validatePassword requires non-empty and minimum 6 characters. handleSubmit calls both validators, sets all errors, guards submission with isSubmitting flag. showPassword toggle switches input type between password and text. rememberMe checkbox state is tracked. Success/error field states drive CSS class variants for visual feedback on inputs.

As a frontend developer, implement the LoginSecurityTrust section for the Login page. This static trust-badge section (LoginSecurityTrust.css) renders a section.lst-section containing div.lst-inner that maps over TRUST_ITEMS — a static array of three entries: { icon: Lock, label: 'Encrypted Connection' }, { icon: ShieldCheck, label: 'Secure Access Only' }, { icon: Fingerprint, label: 'Your Data is Protected' } — each rendered as div.lst-item with a div.lst-icon-wrap containing the lucide-react icon at size 16 and a span.lst-label. No state or interactivity.

As a frontend developer, implement the Footer section for the Login page. This static footer (Footer.css) uses lucide-react icons Mail, Phone, MapPin, Twitter, Linkedin, Facebook, Instagram. Renders footer.ftr-footer with div.ftr-inner containing four columns: ftr-brand (logo 'ES' + Early Salary text, brand description paragraph, three ftr-contact-item divs for email/phone/address with icons), ftr-columns for Platform quickLinks array (Dashboard, Applications, Tracker, Audit Log mapped to hrefs), ftr-columns for Services serviceLinks array (Apply for Loan, Loan Agreement, Disbursement, Repayment), and ftr-social column mapping socialIcons array (Twitter, LinkedIn, Facebook, Instagram) as ftr-social-btn buttons. currentYear computed via new Date().getFullYear(). Note: this component may already exist from the Landing page — reuse/verify before recreating.

As a frontend developer, implement the Navbar section for the Dashboard page. This component may already exist from the Login page (task d38ad5c7-6567-4165-8883-98ceeba3b468). The Navbar uses useState for mobileOpen and scrolled states, useEffect to detect window.location.pathname for activePath and scroll events (scrollY > 8 triggers nb-scrolled class), and useCallback for toggleMobile/closeMobile handlers. It renders NAV_ITEMS array with 8 routes (Dashboard, Applications, Application, Tracker, Audit Log, Agreement, Disbursement, Repayment) using lucide-react icons. Desktop links highlight active route via nb-active class. A hamburger button (3 nb-hamburger-line spans) toggles a mobile drawer. Sign In button links to /Login. Import Navbar.css for styling.

As a Backend Developer, implement document upload and management API endpoints. Endpoints: POST /api/applications/{id}/documents (multipart upload for bank statements, KYC docs, salary slips, PAN, Aadhaar), GET /api/applications/{id}/documents (list with status: verified/pending/rejected), PUT /api/applications/{id}/documents/{docId}/status (admin verify/reject with reason), DELETE /api/applications/{id}/documents/{docId}. Integrate virus scanning (ClamAV or cloud-based scanner) on upload. Store files in object storage (S3-compatible). Generate pre-signed URLs for inline PDF viewer. Enforce file type (PDF, JPG, PNG) and size limits (max 10MB). Note: Frontend tasks ApplicationDocumentUpload (7698e742) and TrackerDocumentUpload (f3b026b7) and Admin Document Viewer depend on this API.

As a Backend Developer, implement the application tracker API endpoints. Endpoints: GET /api/applications/{id}/tracker (returns current stage, status, milestones with timestamps, estimated completion, assigned officer), GET /api/applications/{id}/communications (timeline of all emails/SMS sent with timestamp and content preview for admin Communication Log). The tracker response should include: applicationId, currentStage, status, submittedDate, estimatedCompletion, stageList (Application Submitted → Documents Uploaded → Under Review → Approval → Disbursed → Repayment) with dates and statuses. Note: Frontend tasks TrackerHeader (57fe91fd), TrackerTimeline (0a2db564), TrackerStatusSummary (e3f8fbcd), TrackerMilestones (b948d508), TrackerNextSteps (2aee64d5) depend on this API.

As a Backend Developer, implement the loan agreement API endpoints. Endpoints: GET /api/applications/{id}/agreement (returns full agreement document details: referenceId, borrower info, loan terms, repayment schedule, fees, risks, T&C clauses), POST /api/applications/{id}/agreement/sign (record e-signature with OTP verification: verify OTP, mark agreement as signed, record sigDate and signature), GET /api/applications/{id}/agreement/download (generate and return signed agreement PDF). OTP flow: POST /api/auth/otp/send (send OTP to registered mobile), POST /api/auth/otp/verify (verify OTP code). Integrate with e-sign vendor (DigiLocker or Aadhaar eKYC). Note: Frontend tasks AgreementSignature (ff4c2b53), AgreementActions (80b2242f), AgreementConsent (1842880a) depend on this API.

As a Backend Developer, implement the admin dashboard API endpoints. Endpoints: GET /api/admin/metrics (returns application counts: total, approved, rejected, pending by period: today/week/month/year), GET /api/admin/score-histogram (10 score bins 0-100 with approved/pending counts for 3D bar chart), GET /api/admin/interest-distribution (3 rate segments with count/percentage for donut chart), GET /api/admin/repayment-calendar (repayments array with id, name, amount, date, status for calendar view), GET /api/admin/early-warning (borrowers with salary credit overdue >2 days), GET /api/admin/salary-verification-status (tracker of salary verification statuses). Note: DashboardMetrics (902e5499), DashboardScoreHistogram (8a0a59b9), DashboardInterestDistribution (cabd71fd), DashboardRepaymentCalendar (70d1ce91), DashboardRatesPreview (414fd933) depend on this API.

As a Backend Developer, implement the admin application detail API endpoints. Endpoints: GET /api/admin/applications/{id}/detail (full application detail: personal details name/DOB/gender/PAN masked/Aadhaar masked/address/mobile/email/kycStatus; employment details employer/type/designation/tenure/officialEmail/officeAddress; loan request amount/purpose/disbursementDate/repaymentDate/recommendedInterestRate/totalRepayable; CIBIL summary score/reportDate/activeLoans/totalOutstanding/overdueFlag; bank statement analysis avgMonthlyCredit/debit/netSavingsRate/salaryConsistency/EMIObligations/bounceCount/minBalanceTrend), GET /api/admin/applications/{id}/ai-score (score 0-1, zoneLabel, confidenceLevel, top5Features with impact direction, recommendedAction, recommendedInterestRate), GET /api/admin/applications/{id}/communications (communication timeline: emails/SMS sent with timestamp and content preview). Note: Admin Application Detail Page sections depend on this API.

As an AI Engineer, develop the loan approval classifier ML model (Phase 5, Weeks 9-10). Algorithm: Random Forest / GBDT outputting probability score [0,1]. Feature engineering: debt-to-income ratio, salary consistency score, loan-to-salary ratio, employment tenure proxy, CIBIL score normalization, bank statement features from parser. Training: use synthetic seed data initially; implement train/validation/test split; compute AUC-ROC per model version. Double-threshold decision framework: T_low (auto-reject boundary), T_high (auto-approve boundary), uncertain band in between. Model artifacts: serialized model (joblib/pickle), feature importance rankings (top 5 with direction), AUC-ROC curve data, model card PDF. Expose as POST /api/ml/score endpoint: input application features, output score, confidence, zoneLabel, top5Features, recommendedAction. Store score and features back to application record. Use Litellm/Langchain for orchestration.

As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation and the Auth API backend. Ensure: JWT token is received and stored in AuthStore on successful login; validation errors from API are displayed in LoginForm; role-based redirect (employee → /Dashboard employee view, admin → /Dashboard admin view); token refresh flow works; 401 handling redirects to /Login; remember me persists token. Frontend tasks: LoginForm (54d878a6). Backend task: temp_backend_auth.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for activePath, collapsed, and mobileOpen states. useEffect sets activePath from window.location.pathname. useCallback handles toggleCollapsed, openMobile, closeMobile. Renders NAV_ITEMS with 6 routes (Overview, Applications with badge '14', Threshold Management, Budget Config, Reports, Audit Log) using lucide-react icons (LayoutDashboard, FileText, SlidersHorizontal, Wallet, BarChart3, ScrollText). Sidebar supports collapsed mode (dsb-collapsed class), mobile overlay (dsb-overlay-visible), and mobile open state (dsb-mobile-open). Header shows brand icon 'ES', 'Admin Panel', 'Early Salary'. Nav items detect active state including hash-based routes (/Dashboard#thresholds, /Dashboard#budget). Mobile trigger button uses Menu icon. Import DashboardSidebar.css.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState for currentTime (new Date()), refreshing, and scrolled states. setInterval (5000ms) updates currentTime; scroll event sets dh-scrolled class when scrollY > 8. handleRefresh (useCallback) sets refreshing=true then calls window.location.reload() after 400ms. handleExport (useCallback) generates a CSV blob with filename pattern 'dashboard-report-YYYY-MM-DD.csv', creates object URL, triggers anchor download, then revokes URL. Renders header with dh-title 'Dashboard', formatted date (weekday/year/month/day) and time (12h format) with dh-date-dot indicator. Two action buttons: Refresh (RefreshCw icon, dh-btn-refresh, disabled+dh-refreshing during refresh) and Export (Download icon, dh-btn-export). Import DashboardHeader.css.

As a frontend developer, implement the DashboardMetrics section for the Dashboard page. Uses useState for period (default 'month'). PERIODS array defines 4 tabs: today, week, month, year. METRICS_BY_PERIOD object holds static data for all periods with total/approved/rejected/pending keys, each having value, trend, direction, and comparison fields. CARDS array maps 4 card configs (dm-card--total, dm-card--approved, dm-card--rejected, dm-card--pending) using lucide-react icons (FileText, CheckCircle2, XCircle, Clock). TrendBadge sub-component renders directional badges using TrendingUp, TrendingDown, Minus icons with dm-trend--up/down/flat classes. Clicking period tabs switches displayed metrics. Import DashboardMetrics.css.

As a frontend developer, implement the DashboardScoreHistogram section for the Dashboard page. Uses Three.js for a 3D bar chart rendering. SCORE_RANGES defines 10 bins (0-10 through 91-100) each with approved and pending counts. useMemo computes barData with xApproved/xPending positions and scaled heights (MAX_BAR_HEIGHT=6.0). initScene (useCallback) creates a Three.js scene with WebGLRenderer, PerspectiveCamera, and paired bar meshes (BAR_WIDTH=0.52, BAR_SPACING=1.1) colored COLOR_PRIMARY (#1E3A8A) for approved and COLOR_SECONDARY (#F59E0B) for pending. Raycasting on mousemove sets hoveredBar and tooltip state with score range, approved/pending counts. rafRef drives animation loop. sceneRef stores scene reference. Summary stats show TOTAL_ALL, MEAN_SCORE, PASS_RATE. Imports three, BarChart3, TrendingUp, Clock, CheckCircle2. Import DashboardScoreHistogram.css.

As a frontend developer, implement the DashboardThresholdControls section for the Dashboard page. Uses useState for tLow (300), tHigh (700), lowInput, highInput, activeTrack, glowPos, glowActive. cardRef holds the card DOM element. clamp utility (useCallback) constrains values. Computes lowPercent/highPercent for dual-thumb range track CSS positioning. Derives rejectCount/reviewCount/approveCount as proportional estimates from 148 total. commitLow/commitHigh enforce min gap of 10 between thresholds. Input blur and Enter keydown handlers (handleLowInputBlur, handleHighInputBlur, handleLowInputKeyDown, handleHighInputKeyDown) parse and commit integer values. handleReset restores DEFAULT_T_LOW=300 / DEFAULT_T_HIGH=700. handleTrackPointerDown (getTrackValue via getBoundingClientRect) enables drag-to-set on the track element. Renders SlidersHorizontal icon header, dual numeric inputs, reset button (RotateCcw), and ArrowRight visual indicator. Import DashboardThresholdControls.css.

As a frontend developer, implement the DashboardRatesPreview section for the Dashboard page. Uses Three.js for a CardParticleField ambient particle effect (36 particles, Float32Array positions, WebGLRenderer alpha:true, animRef animation loop) rendered per card. Sparkline sub-component renders SVG path-based sparklines with linearGradient fill using generateSparklinePoints(length, trend, volatility) to produce random walk data. useMemo computes pathD (M/L commands) and areaD (closed fill path) from points array. Rate cards show Activity and TrendingUp icons, AlertTriangle for warning states. Each card mounts a CardParticleField with colorHex prop driving particle color. useEffect initializes Three.js scene per card with cleanup on unmount. Import DashboardRatesPreview.css.

As a frontend developer, implement the DashboardBudgetConfig section for the Dashboard page. Uses useState for dailyBudget (50000), monthlyBudget (1500000), autoMode (true), splitRatio (70), applied (false), appliedAt (null). Computes dailyPct and monthlyPct against static todaysUsage=32500 and monthsUsage=980000. utilLevel derives 'danger' (>=90%), 'warning' (>=70%), or 'normal' from cappedUtil. handleDailyChange/handleMonthlyChange strip non-numeric chars. handleToggle flips autoMode. handleSplitChange updates splitRatio from range input. handleApply sets applied=true and appliedAt timestamp. handleReset restores all defaults. useMemo computes sliderGradient CSS variable --split-pos. formatCurrency renders ₹ with en-IN locale. Renders Banknote icon header, two numeric inputs with progress bars, auto-mode toggle, split ratio slider, Apply button (CheckCircle2 icon) and Reset button (RefreshCw). Applied confirmation shows appliedAt time. Import DashboardBudgetConfig.css.

As a frontend developer, implement the DashboardInterestDistribution section for the Dashboard page. Uses Three.js for a 3D donut/pie chart with drag-to-rotate. SEGMENT_DATA defines 3 rate segments: 8% (35%, #1E3A8A), 10% (45%, #F59E0B), 12% (20%, #EF4444). useMemo computes segmentAngles by iterating SEGMENT_DATA and accumulating sweep angles from -Math.PI/2. useEffect initializes Three.js scene: PerspectiveCamera at (0,1.8,8), AmbientLight + DirectionalLight with shadow maps (512x512, PCFSoftShadowMap), WebGLRenderer alpha:true. Pie segment meshes stored in segmentsRef. isDragging, prevMouse, rotationRef, targetRotation refs handle pointer drag rotation with lerp-based smoothing in animation loop. Raycasting sets hoveredSegment and tooltipPos/tooltipVisible on mousemove. useState tracks activeSegment (click to highlight) and hoveredSegment. Shows TOTAL_LOANS count, AVG_RATE='9.4%'. Legend rows per segment with color swatches. Import DashboardInterestDistribution.css.

As a frontend developer, implement the DashboardRepaymentCalendar section for the Dashboard page. Uses useState for current month/year navigation and selected day detail modal. REPAYMENTS array contains 20 entries with id, name, amount, date (YYYY-MM-DD), and status (paid/overdue). DOW_LABELS and MONTH_NAMES arrays drive calendar header. useMemo computes calendar grid (leading empty cells for day-of-week offset, then day cells). getDayStatus helper filters REPAYMENTS by dateStr, returns object with count, status ('overdue'/'due'/'paid'/'upcoming'), repayments array, and total amount. computeStats aggregates monthly paid/overdue counts and total amounts. ChevronLeft/ChevronRight buttons navigate months. Clicking a day with repayments opens a detail panel (X close button from lucide-react) showing individual repayment cards with name, amount (₹ formatted), and status badge. Calendar days show colored dot indicators by status. Import DashboardRepaymentCalendar.css.

As a frontend developer, implement the DashboardAuditLog section for the Dashboard page. Uses useState for selectedAdmin (default 'All Admins') and search/filter state. ADMINS array lists 6 admin names including 'All Admins' for the filter dropdown. AUDIT_LOG_DATA contains 10+ entries each with id, timestamp, changedBy, tLowOld, tLowNew, tHighOld, tHighNew, and reason fields. useMemo filters log entries by selectedAdmin and search query. Each log row displays: timestamp, changedBy avatar/name, threshold change deltas (tLow old→new, tHigh old→new with ArrowRight-style indicators), and truncatable reason text. Admin filter dropdown and search input control visible entries. Renders in a scrollable table or card list layout. Import DashboardAuditLog.css.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from the Login page (task 301d831f-21c7-478a-a479-9cb8e2f8a14d). Renders a 4-column layout: brand column with ftr-logo (ES icon + 'Early Salary' text), brand description, and 3 contact items using Mail/Phone/MapPin lucide icons. quickLinks array (Dashboard, Applications, Tracker, Audit Log) renders under 'Platform' column. serviceLinks array (Apply for Loan, Loan Agreement, Disbursement, Repayment) renders under 'Services' column. socialIcons array (Twitter, LinkedIn, Facebook, Instagram) renders as ftr-social-btn buttons. currentYear computed via new Date().getFullYear(). Import Footer.css.

As a frontend developer, implement the ApplicationsHeader section for the Applications page. This section renders a stats dashboard header using a static `stats` array of 4 objects (Total Applications: 284, Pending Review: 47, Approved: 198, Rejected: 39), each with an inline SVG icon and an `iconClass` variant (`ah-stat-icon-wrap--total`, `--pending`, `--approved`, `--rejected`). The component renders: (1) a breadcrumb `<nav>` with an anchor to `/Dashboard` and a current-page span; (2) a title row with an `<h1>` ('Loan Applications') and an export `<button>` with a download SVG icon; (3) an `ah-stats-grid` that maps over the stats array to render `ah-stat-card` divs, each containing a colored icon wrapper and stat label/value text. No state hooks are used — it is fully static. Styled via `ApplicationsHeader.css` with classes prefixed `ah-`. Note: the Navbar component may already exist from the Dashboard page (task bc969dfd).

As a frontend developer, implement the ApplicationsFilters section for the Applications page. This section is a fully interactive filter bar with 6 pieces of `useState`: `search` (text input), `activeStatus` ('all' | 'pending' | 'approved' | 'rejected'), `dateFrom` and `dateTo` (date inputs), `sortBy` ('newest' default), and a read-only `resultCount` (47). It renders: (1) a search input with a `SearchIcon` SVG; (2) a status tab group mapping over `STATUSES` array (4 items with colored dot indicators); (3) a date range row with two date inputs each preceded by a `CalendarIcon` SVG; (4) a sort-by `<select>` mapping over `SORT_OPTIONS` (6 options) with a `ChevronDownIcon`; (5) a dynamic active-filter tags row that builds `activeFilterTags` array from non-default state values, each tag rendered with an `XIcon` clear button; (6) a 'Clear All Filters' button with `ClearIcon` that only appears when `hasActiveFilters` is true. Styled via `ApplicationsFilters.css` with `af-` prefix classes.

As a frontend developer, implement the ApplicationsList section for the Applications page. This section renders a paginated, sortable data table of loan applications using `useState` and `useMemo`. State includes: `sortKey` (column key), `sortDir` ('asc'/'desc'), and `currentPage` (1-based). The static `APPLICATIONS` array contains 12 sample records (fields: id, name, status, amount, date, email, employer, salary). `useMemo` computes a sorted and paginated slice using `ITEMS_PER_PAGE = 8`. The table renders columns: Application ID, Applicant Name, Status (via `StatusBadge` component using `STATUS_MAP` with 4 statuses: pending/approved/rejected/under_review, each with colored `al-badge-dot`), Loan Amount (INR formatted), Date, and an Actions column with an `EyeIcon` view button. Sortable column headers use a `SortArrow` component (from `SortArrow.css`). A pagination footer renders prev/next buttons and page number indicators. Styled via `ApplicationsList.css` with `al-` prefix classes.

As a frontend developer, implement the ApplicationsDetail section for the Applications page. This is a slide-in detail panel (drawer/modal) triggered by a 'View Application' button. State: `isOpen` (boolean), `scrollY` (number, captured on open to lock scroll position). Uses `useRef` for `panelRef` and `useCallback` for `handleOpen`, `handleClose`, `handleOverlayClick`. A `useEffect` attaches/detaches a keydown listener that calls `handleClose` on Escape key. On open, `document.body.style.overflow = 'hidden'` and `scrollY` is set; on close, overflow is restored. The panel renders the `SAMPLE_APPLICATION` object (id: ESL-2026-0482, status: pending) in tabbed sections: (1) Applicant Info (fullName, email, mobile, dob, panNumber, aadhaarNumber, address); (2) Employment (employerName, type, designation, yearsAtEmployer, salaryCreditDate); (3) Loan Request (monthlyNetSalary, requestedAmount, purpose, tenureMonths, interestRate, emiAmount); (4) Approval Score — an SVG circular progress ring computed via `scoreCircumference = 2πr(34)` and `scoreOffset` based on score/maxScore (78/100), color-coded by `approvalScore.category`; (5) Documents list with verified/unverified badge, file size, upload timestamp. Styled via `ApplicationsDetail.css`.

As a frontend developer, implement the ApplicationsActions section for the Applications page. This section renders an action panel with three decision buttons (Approve, Reject, Request Info) and a modal dialog workflow. State: `dialog` (null | 'approve' | 'reject' | 'info'), `reason` (string textarea), `toast` (null | {message, type}). `openDialog(action)` sets dialog and clears reason; `closeDialog()` resets both. `showToast(message, type)` sets toast with a `setTimeout` of 3000ms auto-clear. `confirmAction` (useCallback, depends on `dialog`) fires toast messages specific to each action ('approved successfully', 'has been rejected', 'information requested') then closes dialog. `selectPreset(preset)` populates the reason textarea from preset arrays. `dialogConfig` object maps each action key to: icon SVG, `iconClass`, title, subtitle, `presets` array (5 items each from `APPROVE_REASONS`, `REJECT_REASONS`, `INFO_REQUESTS`), `actionLabel`, and `actionClass`. The modal renders a preset reason pills row and a freetext textarea. A toast notification component fades in/out at the bottom. Static `APPLICANT_DATA` (id: APP-2026-0582, Priya Sharma, loanAmount: 85000, score: 72) drives the applicant summary in the dialog. Styled via `ApplicationsActions.css` with `aa-` prefix classes.

As a frontend developer, implement the Navbar section for the AuditLog page. This component (Navbar.css) is shared across pages and may already exist from Dashboard. It uses useState for mobileOpen and scrolled states, useEffect to detect window.location.pathname for activePath and attach a passive scroll listener toggling the nb-scrolled class, and useCallback for toggleMobile/closeMobile handlers. Renders NAV_ITEMS array (Dashboard, Applications, Application, Tracker, Audit Log, Agreement, Disbursement, Repayment) with lucide-react icons (LayoutDashboard, FileText, ScrollText, AppWindow, MapPin, Handshake, Banknote, RotateCcw). Includes desktop nav links with nb-active class on current path, a Sign In button linking to /Login, a hamburger button with three nb-hamburger-line spans toggling nb-open class, and a mobile drawer with nb-drawer-open class. Verify the Audit Log nav item is active on this page.

As a frontend developer, implement the Navbar section for the Application page. This component (may already exist from AuditLog/Dashboard pages) uses useState for mobileOpen, scrolled, profileOpen, and activePath, plus a useRef for profileRef. It renders the EarlySalary logo with 'ES' icon, a NAV_ITEMS array with Application link using AppWindow icon, a desktop nav with active path highlighting via window.location.pathname, a notification Bell icon, and a profile dropdown (User, Settings, HelpCircle, LogOut, Shield icons) with click-outside detection via mousedown event listener. The scrolled state adds 'nb-scrolled' class on window.scrollY > 8. Role badge toggles between nb-role-badge--admin and nb-role-badge--employee for USER_DATA with hardcoded 'Priya Sharma' / 'PS' initials.

As a Backend Developer, implement disbursement and NACH (auto-debit mandate) API endpoints. Endpoints: GET /api/applications/{id}/disbursement (returns disbursement status: loanId, status, amountApproved, requestDate, estimatedDate, bankName, bankAccount masked, disbursementMethod, progress, progressSteps), GET /api/applications/{id}/disbursement/documents (loan agreement, disbursement receipt, repayment schedule, bank statement extract download links), GET /api/applications/{id}/disbursement/breakdown (principal, interest deducted, processing fee, net disbursed), POST /api/nach/setup (initiate NACH/eNACH mandate registration), GET /api/nach/{id}/status (check mandate status: Active/Pending/Failed). Integrate with NACH/eNACH partner. Note: Frontend Disbursement page sections depend on this API.

As a Backend Developer, implement the threshold control and budget configuration API endpoints. Endpoints: GET /api/admin/thresholds (current T_low, T_high, budgetCaps: daily/monthly, autoMode, splitRatio, utilizationToday, utilizationMonth), PUT /api/admin/thresholds (save new T_low, T_high with mandatory reason/notes; triggers AUC preview recalculation), GET /api/admin/thresholds/preview (returns live preview of approval rate, expected repayment rate, avg interest rate, estimated disbursement given proposed T_low/T_high query params), PUT /api/admin/budget (update dailyBudget, monthlyBudget, autoMode, splitRatio), GET /api/admin/thresholds/history (paginated audit log of threshold changes: changedBy, oldValues, newValues, timestamp, reason). Note: DashboardThresholdControls (16419b97), DashboardBudgetConfig (91c0502d), AuditLog page sections depend on this API.

As an AI Engineer, develop the interest rate regressor ML model (Phase 5, Weeks 9-10). Algorithm: Gradient Boosting Regressor predicting optimal interest rate (%) conditional on approval. Higher rate for riskier profiles. Input features: same as approval classifier plus approval probability score. Output: recommendedInterestRate (%). Constraints: min/max interest rate bounds configurable. Model artifacts: serialized model, feature importance, validation metrics (RMSE, MAE), model card PDF. Expose as POST /api/ml/recommend-rate endpoint: input application features + approval score, output recommendedRate, rationale. Integrate with approval scoring pipeline so both models run sequentially on application submission. Store recommended rate in application record for admin review and override.

As a Tech Lead, verify the end-to-end integration between the Application page frontend and the Loan Application CRUD API. Ensure: form data is correctly serialized and sent to POST /api/applications; server-side validation errors are surfaced in the form; application ID returned is stored and used for subsequent navigation (to Tracker); document upload sections call POST /api/applications/{id}/documents correctly; loan details section populates from GET /api/applications/{id}; status cards reflect real API data. Frontend tasks: ApplicationWelcomeBanner (f6849b60), ApplicationLoanDetails (f6cfb83c), ApplicationDocumentUpload (7698e742). Backend task: temp_backend_loan_application.

As a Tech Lead, verify the end-to-end integration between the Tracker page frontend and the Application Tracker Status API. Ensure: tracker timeline reflects real application stage data from GET /api/applications/{id}/tracker; status summary card shows correct applicationId, currentStage, submittedDate, estimatedCompletion; document upload list shows real document statuses; milestone cards show correct loan amount and dates; next steps CTA links correctly based on current stage. Frontend tasks: TrackerStatusSummary (e3f8fbcd), TrackerTimeline (0a2db564), TrackerDocumentUpload (f3b026b7). Backend task: temp_backend_tracker.

As a Tech Lead, verify the end-to-end integration between the Agreement page frontend and the Loan Agreement & E-Sign API. Ensure: agreement details (referenceId, borrower name, loan terms, repayment schedule, fees) are populated from GET /api/applications/{id}/agreement; OTP send/verify flow calls POST /api/auth/otp/send and POST /api/auth/otp/verify; signature submission calls POST /api/applications/{id}/agreement/sign; download button calls GET /api/applications/{id}/agreement/download; signed state persists and updates application status; consent checkboxes are required before signing. Frontend tasks: AgreementSignature (ff4c2b53), AgreementActions (80b2242f), AgreementConsent (1842880a), AgreementRepaymentSchedule (0c055a13). Backend task: temp_backend_agreement.

As a Tech Lead, verify the end-to-end integration between the Admin Dashboard frontend sections and the Admin Dashboard Metrics API. Ensure: DashboardMetrics cards populate from GET /api/admin/metrics with period switching working; DashboardScoreHistogram renders real bin data from GET /api/admin/score-histogram; DashboardInterestDistribution shows real rate segments from GET /api/admin/interest-distribution; DashboardRepaymentCalendar populates real repayment dates/statuses; DashboardAuditLog shows real threshold change history. Frontend tasks: DashboardMetrics (902e5499), DashboardScoreHistogram (8a0a59b9), DashboardInterestDistribution (cabd71fd), DashboardRepaymentCalendar (70d1ce91), DashboardAuditLog (0567fc17). Backend task: temp_backend_admin_dashboard.

As a Tech Lead, verify the end-to-end integration between the Applications page frontend and the Loan Application CRUD API. Ensure: ApplicationsList table populates from GET /api/applications with real pagination and sorting; ApplicationsFilters sends filter params (status, dateFrom, dateTo, search, sortBy) as query params to the API and table updates reactively; ApplicationsHeader stats (Total, Pending, Approved, Rejected) populate from GET /api/admin/metrics; ApplicationsActions approve/reject/request-info buttons call PUT /api/applications/{id}/override; ApplicationsDetail panel populates from GET /api/applications/{id}. Frontend tasks: ApplicationsList (22600f0a), ApplicationsFilters (10685062), ApplicationsActions (bc666cea), ApplicationsDetail (e330ae6a). Backend task: temp_backend_loan_application.

As a frontend developer, implement the AuditLogHeader section for the AuditLog page using AuditLogHeader.css. This is a static presentational section rendering a breadcrumb nav (aria-label='Breadcrumb') built from a breadcrumb array with Home icon (lucide-react, size 14) for the Admin/Dashboard crumb and ChevronRight (size 12) separators. Renders the page title 'Audit Log' as an h1.ah-title, a subtitle paragraph describing threshold change tracking for T_low and T_high with strong emphasis, an ah-accent-line div, and an ah-meta-badge span containing Activity icon (size 13) with 'Threshold Change History' label plus an ah-meta-dot separator span.

As a frontend developer, implement the AuditLogFilters section for the AuditLog page using AuditLogFilters.css. Uses useState for dateFrom, dateTo, changeType, and adminUser filter fields, and useMemo to compute activeFilterCount (0–4) across all four fields. Renders a date range row with two date inputs (alf-input, alf-active class when filled) separated by an alf-date-separator 'to' span. Renders a Change Type select dropdown populated from CHANGE_TYPES array (All Change Types, Threshold Adjusted, Budget Cap Set, Auto Split Configured) and an Admin User select from ADMIN_USERS array (All Admins, Priya Sharma, Rajesh Kumar, Anita Desai, Vikram Singh), both with alf-active class when a non-empty value is selected. Includes a handleClear function resetting all four state fields, with a clear/reset button conditionally rendered when hasActiveFilters is true.

As a frontend developer, implement the Footer section for the AuditLog page using Footer.css. This component is shared across pages and may already exist from Dashboard or Login. Renders four columns: Brand column with ES logo icon, 'Early Salary' logo text, brand description paragraph, and contact items using Mail/Phone/MapPin lucide-react icons (size 15) for support@earlysalary.com, 1-800-SALARY, and Mumbai India. Platform column with quickLinks array (Dashboard, Applications, Tracker, Audit Log). Services column with serviceLinks array (Apply for Loan, Loan Agreement, Disbursement, Repayment). Connect column with ftr-social-btn buttons for Twitter, Linkedin, Facebook, Instagram icons from lucide-react. Footer bottom bar shows currentYear via new Date().getFullYear().

As a frontend developer, implement the ApplicationSidebar section for the Application page. Uses useState for role ('employee'/'admin'), drawerOpen, and activePath. Renders a mobile header bar with a Menu icon toggle and overlay backdrop with closeDrawer on click. The sidebar aside element receives 'asb-drawer-open' class when drawerOpen is true. Displays an avatar with 'PS' initials and 'Priya Sharma' profile info. Includes a role switcher toggle between EMPLOYEE_MENU (Dashboard, Application, Tracker, Agreement, Disbursement, Repayment with lucide icons) and ADMIN_MENU (Dashboard, Applications Review, Budget Settings, Audit Log). Active path is highlighted via window.location.pathname comparison.

As a frontend developer, implement the ApplicationWelcomeBanner section for the Application page. Uses useState for role (defaults to APPLICATION_DATA.role = 'employee'). For the employee view, renders an awb-card with application ID 'ESL-2026-04721', a status badge driven by STATUS_CONFIG map (pending/inreview/approved/rejected/disbursed each with unique className and dot indicator), a 'Next Step' prompt with nextStep text, and a CTA link to /Tracker with TrendingUp icons. For the admin view, renders ADMIN_METRICS array of 4 metric tiles (Total Applications, Pending Review, Approved Today, Rejected) each with a lucide icon (FileText, Clock, CheckCircle, AlertCircle) and a color variant (blue, amber, green, red).

As a frontend developer, implement the ApplicationStatusCards section for the Application page. Uses useState for viewRole ('employee'/'admin') and a useRef for gridRef. Features mouse-tracking interaction via handleMouseMove/handleMouseLeave callbacks that set CSS custom properties --mouse-x and --mouse-y on card elements for gradient spotlight effects. Employee view renders EMPLOYEE_CARDS array: Application Status (Clock icon, primary scheme, 'Under Review'), Est. Approval Date (CalendarCheck, highlight scheme, 'Jun 04, 2026'), Loan Amount Requested (IndianRupee, '₹ 45,000'), and Monthly Repayment (Calculator, accent, '₹ 15,000'). Admin view renders ADMIN_METRICS with a bar chart visualization (8 bars with low/mid/high type classes and height values), Pending Reviews card with accent flag, and Total Approved card with trend indicator '+12% vs last month'. Displays a live time string using toLocaleTimeString('en-IN').

As a frontend developer, implement the ApplicationLoanDetails section for the Application page. Renders a static ald-card with a header containing a FileText icon, title 'Loan Request Details', subtitle 'Application #ESL-2026-0482', and a Verified badge with CheckCircle icon and animated dot. The ald-details-grid maps over loanDetails array of 7 items (Loan Amount ₹75,000 with ald-value-amount highlight, Purpose, Salary Credit Date with dividerAfter, Employment Type, Designation, Employer Name 'TechNova Solutions Pvt. Ltd.', Monthly Net Salary ₹1,25,000 with ald-value-highlight). Footer row shows an Info icon with last-updated timestamp and a 'Request Edit' button with Pencil icon.

As a frontend developer, implement the ApplicationDocumentUpload section for the Application page. Includes a 3D decorative header badge using @react-three/fiber Canvas with DocIcon3D (boxGeometry scaled [0.8,1.0,0.15]) and @react-three/drei Float/MeshDistortMaterial components with ambient and directional lighting. Manages DOCUMENT_CATEGORIES state array (bank-statements, kyc-docs, additional-docs) each with files array. Uses useState and useRef for drag-and-drop upload zones, file status tracking (uploaded/processing/approved/rejected) with STATUS_LABELS map. Renders per-category upload cards with FileText/Paperclip icons, required/optional badges, accepted format hints, max size labels, and per-file rows showing type icon (pdf → FileText, image → Image, else File), file name, size, upload date, and status chip. Includes X remove button, RefreshCw retry for rejected files, and CheckCircle2 for approved. AlertCircle shown for rejected files with error messaging.

As a frontend developer, implement the ApplicationLoanAgreement section for the Application page. Uses useState for signed (bool), agreed (bool), and signDate (null/string). Renders an ala-card that gains 'ala-signed-card' class post-signature, with an accent bar that switches to 'ala-bar-signed'. Header icon toggles between FileText (unsigned) and ShieldCheck (signed) with corresponding title 'Loan Agreement' vs 'Loan Agreement — Signed'. Badge toggles between ala-badge-pending (AlertCircle + 'Action Required') and ala-badge-signed (Check + 'Signed'). Displays agreementSummaryItems (6 rows: Loan Amount ₹45,000, Interest Rate 12.5%, Repayment Term, Processing Fee, Late Payment Penalty, Prepayment policy). Terms preview scrollable div with formatted legal text, borrowerInfo name 'Rahul Sharma' and loanRef 'ESL-2026-08942'. Checkbox for agreed state gates the handleSign function which sets signDate to today's formatted date. PenLine icon on sign button.

As a frontend developer, implement the ApplicationDisbursement section for the Application page. Features a rich 3D scene using @react-three/fiber Canvas with OrbitControls and THREE.js. CoinMesh components use cylinderGeometry (args [0.45,0.45,0.12,48]) with useFrame animation — rotating on Y axis and sinusoidal Y-position float keyed to elapsedTime and position[0]. BanknoteMesh uses boxGeometry (args [1.2,0.04,0.65]) with animated Y float and Z rotation oscillation. FallingParticles uses useMemo to generate count*3 Float32Array positions, with useFrame updating Y positions downward and resetting above threshold — rendered as points with AdditiveBlending, color #FBBF24, depthWrite false. DisbursementScene switches coin colors based on status prop. UI panel shows disbursement info with Building2, Calendar, CheckCircle2, Clock, Copy/Check (clipboard copy toggle), Landmark, CreditCard, Hash, User icons for bank details including account number, IFSC, and beneficiary name.

As a frontend developer, implement the ApplicationRepaymentSchedule section for the Application page. Uses useState for view mode toggle ('table'/'calendar') and useMemo for derived data. SCHEDULE_DATA contains 9 EMI entries with dueDate, principal, interest, total (₹10,000 each), and status (paid/upcoming). Table view renders paginated rows with CalendarDays, Download, ChevronLeft/Right controls, StatusBadge component (ars-status-paid/upcoming/overdue/due-today classes with dot indicator), and formatted currency via Intl.NumberFormat('en-IN', INR). Calendar view uses getDaysInMonth/getFirstDayOfMonth helpers to build a monthly grid, maps EMI due dates to calendar cells using toDateKey, displays CAL_STATUS_CLASS and CAL_STATUS_BADGE_LABEL overlays on matching days, with ChevronLeft/Right month navigation and X close button on detail modals. Download button and AlertCircle for overdue warnings.

As a frontend developer, implement the Footer section for the Application page. This component may already exist from the Dashboard or AuditLog pages. Renders a ftr-footer with two decorative ftr-bg-shape divs for background visuals. Brand column displays 'ES' logo icon, 'Early Salary' text, brand description paragraph, and three contact items using Mail (support@earlysalary.com), Phone (1-800-SALARY tel link), and MapPin (Mumbai, India) lucide icons. Platform links column maps platformLinks array (Loan Application, Track Status, Loan Agreement, Repayment Schedule). Resources column maps resourceLinks array (How It Works, Eligibility Criteria, Interest Rates, FAQs). Social icons row maps socialIcons array (Twitter, Linkedin, Facebook, Instagram) as icon-only buttons. Footer bottom bar shows dynamic currentYear via new Date().getFullYear().

As a frontend developer, implement the Navbar section for the Tracker page. This component may already exist from the Application page (task fc8cdde2-8f16-4047-b46a-bb45d9c09d2f). Uses useState for mobileOpen and scrolled states, useEffect to detect window.location.pathname for activePath highlighting and scroll listener (window.scrollY > 8 triggers nb-scrolled class). NAV_ITEMS array maps 8 routes including Tracker (/Tracker with MapPin icon) using lucide-react icons (LayoutDashboard, FileText, ScrollText, AppWindow, MapPin, Handshake, Banknote, RotateCcw). Renders desktop nav links with nb-active class on active route, a Sign In button linking to /Login, a hamburger button with aria-expanded toggling nb-open class, and a mobile drawer with nb-drawer-open class. useCallback memoizes toggleMobile and closeMobile handlers. Imports Navbar.css for nb-navbar, nb-inner, nb-logo, nb-links, nb-actions, nb-hamburger-line, nb-mobile-drawer styles.

As a Backend Developer, implement repayment schedule and payment API endpoints. Endpoints: GET /api/applications/{id}/repayment (returns summary: totalLoanAmount, remainingBalance, totalPaid, interestCharged, repaymentStatus: on-track/overdue/at-risk, loanRef, lastUpdated), GET /api/applications/{id}/repayment/schedule (paginated schedule rows: paymentNumber, dueDate, principal, interest, totalAmount, status: paid/upcoming/overdue), GET /api/applications/{id}/repayment/timeline (milestones for 3D timeline: disbursement + payment nodes with dates, amounts, statuses), POST /api/repayment/pay (initiate payment: amount, paymentMethod: auto_debit/upi/net_banking/debit_card), GET /api/applications/{id}/repayment/documents (receipt download). Note: Frontend Repayment page sections depend on this API.

As an AI Engineer, deploy the AI inference microservice (Phase 6, Week 11). Package both models (approval classifier + interest rate regressor) and bank statement parser into a FastAPI microservice. Endpoints: POST /api/ml/score, POST /api/ml/recommend-rate, POST /api/ml/parse-bank-statement. Model versioning: store model version with each prediction for audit. AUC preview endpoint: GET /api/ml/auc-preview?tLow=X&tHigh=Y returns projected approval rate and expected repayment rate at given thresholds (used by admin dashboard live preview). Model performance monitoring: log prediction requests, scores, and outcomes for drift detection. Containerize with Docker. Expose internal service URL to main backend. Use Litellm for LLM integration if needed for document analysis.

As a Tech Lead, verify the end-to-end integration between the Disbursement page frontend and the Disbursement & NACH API. Ensure: disbursement status card populates from GET /api/applications/{id}/disbursement with real loanId, status, amount, bank details; timeline steps reflect actual progress; breakdown doughnut chart uses real principal/interest/fee data; documents list fetches real download URLs from storage; NACH alert banner reflects actual mandate status; support CTA shows correct contact info. Frontend tasks: DisbursementStatusCard (20fbdc48), DisbursementTimeline (d373325a), DisbursementBreakdown (b233bc33), DisbursementDocuments (9fbc968a). Backend task: temp_backend_disbursement.

As a Tech Lead, verify the end-to-end integration between the Threshold Control page frontend (DashboardThresholdControls, DashboardBudgetConfig) and the Threshold Control & Budget API. Ensure: current T_low/T_high values load from GET /api/admin/thresholds on mount; live AUC preview calls GET /api/admin/thresholds/preview as sliders change (debounced); save action calls PUT /api/admin/thresholds with confirmation modal; budget config loads and saves via PUT /api/admin/budget; utilization bars reflect real usage; AuditLog table populates from GET /api/admin/thresholds/history with pagination. Frontend tasks: DashboardThresholdControls (16419b97), DashboardBudgetConfig (91c0502d), AuditLogTable (90a2ead6), AuditLogPagination (f53ef4b4). Backend task: temp_backend_threshold.

As a frontend developer, implement the AuditLogTable section for the AuditLog page using AuditLogTable.css. Uses useState and useMemo to manage and display AUDIT_RECORDS (5+ entries) each with fields: id, timestamp, adminName, adminInitials, changeType, changeCategory (threshold-increase, threshold-decrease, budget-update, config-change), previousValue, newValue, reason, status, isCritical flag, affectedApps count, and a nested details object (appliedBy, approvedBy, effectiveFrom, impactedSegment, rollbackWindow, and type-specific threshold/budget/config fields). Renders rows with admin avatar initials, changeCategory badge styling, isCritical AlertTriangle icon (lucide-react), previous→new value display, affectedApps count, status badge, and a ChevronRight expand button. Imports Database, Users, Clock, User icons from lucide-react for column headers or detail indicators. Row expansion or detail linking should trigger display of the AuditLogDetails panel.

As a frontend developer, implement the Sidebar section for the Tracker page. Uses useState for collapsed, mobileOpen, and activePath (/Dashboard default) states. useEffect sets activePath from window.location.pathname and controls document.body.style.overflow when mobileOpen changes (locks scroll on open). navSections array organizes 3 groups — Overview (Dashboard), Loan Management (Applications, Tracker, Agreement, Disbursement, Repayment), Administration (Audit Log) — using lucide-react icons (LayoutDashboard, ClipboardList, MapPin, FileSignature, Banknote, CalendarCheck, FileText, Building2). handleLinkClick updates activePath and closes mobile drawer. sb-sidebar class conditionally appends sb-sidebar--collapsed and sb-sidebar--mobile-open. Renders mobile toggle button with X/Menu icons, semi-transparent overlay with sb-overlay--visible class, collapse chevron button (desktop only), brand block with Building2 icon showing EarlySalary / Loan System, and grouped nav sections. Imports Sidebar.css.

As a frontend developer, implement the TrackerHeader section for the Tracker page. Renders a breadcrumb nav (aria-label='Breadcrumb') with ol.th-breadcrumb mapping breadcrumbItems array of 3 items: Dashboard (/Dashboard, Home icon), Applications (/Applications, FileText icon), Tracker (active, no link). ChevronRight separators between items. Title row contains h1.th-page-title 'Application Tracker', a dynamic status badge (th-status-badge th-status-under-review) with animated th-status-dot and label from statusLabels map, and a timestamp span with Clock icon showing 'Last updated: June 1, 2026 at 10:32 AM'. Static subtitle paragraph describes the review process. Ends with hr.th-divider. status variable defaults to 'under-review'. Imports TrackerHeader.css.

As a frontend developer, implement the TrackerStatusSummary section for the Tracker page. Renders a status card driven by STATUS_DATA object containing: status ('pending'), badgeLabel ('Pending Approval'), applicationId ('ESL-2026-08472'), currentStage ('Document Verification'), submittedDate ('28 May 2026'), estimatedDays ('3-5 business days'), estimatedDaysRemaining (3), estimatedDaysTotal (5), and stageList array of 5 stages (Application, KYC Check, Doc Review, Approval, Disbursement) each with done/current/upcoming state. progressPercent computed as Math.round((estimatedDaysRemaining / estimatedDaysTotal) * 100). Top row renders tss-badge with tss-badge--pending class and animated tss-badge-dot, app ID with Hash icon. Info grid shows 3 items (Submitted with Calendar icon, Est. Completion with Clock icon, Application with FileText icon). Estimate bar shows tss-progress-track with dynamic width. Stage pipeline renders horizontal ChevronRight-separated steps with state-based classes. Imports TrackerStatusSummary.css.

As a frontend developer, implement the TrackerTimeline section for the Tracker page. Integrates @react-three/fiber Canvas and @react-three/drei OrbitControls with a custom ProgressRing 3D component. ProgressRing uses useRef (groupRef) and useMemo to create THREE.TorusGeometry (1.6 radius, 0.08 tube), THREE.SphereGeometry (0.18 dot), and THREE.MeshStandardMaterial instances for ring (#E5E7EB), progress (#1E3A8A), and dot (#FBBF24 with emissive glow). 60 particle positions computed via useMemo as Vector3 array around the torus. useFrame drives rotation animation on groupRef. TIMELINE_STAGES array has 6 entries (Application Submitted, Documents Uploaded, Under Review, Approval, Disbursed/current, Repayment/pending) each with id, label, date, status, desc, and lucide icon (CheckCircle2, Clock, Circle). Vertical timeline renders stage cards with status-conditional classes and icons. useState/useEffect manage canvas mount state. Imports TrackerTimeline.css.

As a frontend developer, implement the TrackerDocumentUpload section for the Tracker page. Uses useState for docs array initialized from DOCUMENTS (5 items: Bank Statement verified, Salary Slip verified, KYC Aadhaar verified, KYC PAN pending, Employment ID rejected). STATUS_CONFIG maps status keys to label, lucide icon (CheckCircle2, Clock, XCircle), and CSS className. formatDate utility uses toLocaleDateString with en-IN locale. Card header renders FolderOpen icon, title, doc count badge, and Upload button (handleHeaderUpload). Desktop view renders tdu-table with thead columns (Document Name, Upload Date, Status, Action) and tbody rows with status icon+label and conditional action buttons: Download (Download icon, handleDownload) for verified, Re-upload (RefreshCw icon, handleReupload) for rejected. Mobile card view renders same data as stacked tdu-mobile-card items. Footer renders 'Upload More Documents' button with Plus icon (handleUploadMore). All handlers are placeholder stubs. Imports TrackerDocumentUpload.css.

As a frontend developer, implement the TrackerMilestones section for the Tracker page. Renders a 4-card grid from milestones array: '7 Days / Until Next Salary Credit' (CalendarDays icon), '₹45,000 / Loan Amount Approved' (IndianRupee icon), '12.5% / Annual Interest Rate' (Percent icon), '3 Months / Repayment Period' (Clock icon). useRef stores cardRefs array. useCallback memoizes handleMouseMove which reads getBoundingClientRect, computes centerX/centerY offset, derives rotateX (±6deg) and rotateY (±6deg) from mouse position, and applies perspective(800px) transform directly on card DOM node. handleMouseLeave resets transform to identity. Each tm-card renders tm-card-tilt overlay, tm-card-shine shimmer layer, tm-card-icon-wrap with Icon component (size=22, strokeWidth=1.8), tm-card-value, and tm-card-label. Section header shows tm-title and live-update indicator with animated tm-updated-dot. Imports TrackerMilestones.css.

As a frontend developer, implement the TrackerNextSteps section for the Tracker page. Uses useState for mousePos ({x:50, y:50}) and useRef for cardRef. useCallback memoizes handleMouseMove (computes x/y as percentage of card dimensions via getBoundingClientRect) and handleMouseLeave (resets to 50/50). CSS custom properties --mouse-x and --mouse-y are injected via inline style on tns-card for radial gradient spotlight effect. subSteps array has 4 items with done/pending/todo statuses. Card renders: header row with tns-step-label badge, tns-urgency-dot, and tns-due-badge (AlertCircle icon + 'Expected by June 5, 2026'); action area with FileText icon (size=24) and h3 'Review and sign your loan agreement' with description text; sub-steps list with status-conditional checkmark/circle icons; CTA row with anchor tns-cta-btn linking to /Agreement ('Review Agreement' + ArrowRight icon) and tns-timeline-row with Calendar icon showing completion estimate. Imports TrackerNextSteps.css.

As a frontend developer, implement the Footer section for the Tracker page. This component may already exist from the Application page (task 05506779-a056-4409-807a-07a518469801) or AuditLog page (task 44ebcf70-e5b6-42da-bfbb-596baa75a2fd). Renders a 4-column ftr-inner layout: brand column with ES logo icon, 'Early Salary' text, brand description paragraph, and 3 contact items using Mail, Phone, MapPin lucide icons (support@earlysalary.com, 1-800-SALARY, Mumbai India); Platform column with quickLinks array (Dashboard, Applications, Tracker, Audit Log); Services column with serviceLinks array (Apply for Loan, Loan Agreement, Disbursement, Repayment); Connect column with socialIcons array (Twitter, Linkedin, Facebook, Instagram as ftr-social-btn buttons). currentYear computed via new Date().getFullYear(). Bottom bar shows copyright line. Imports Footer.css.

As a frontend developer, implement the Navbar section for the Agreement page. This component may already exist from previous pages (Application, Tracker, AuditLog). It uses useState for mobileOpen and scrolled states, useEffect to detect window.location.pathname for activePath and scroll events (window.scrollY > 8 triggers nb-scrolled class), and useCallback for toggleMobile/closeMobile handlers. Renders NAV_ITEMS array (Dashboard, Applications, Application, Tracker, Audit Log, Agreement, Disbursement, Repayment) with Lucide icons, a mobile hamburger with aria-expanded, and a mobile drawer with nb-drawer-open class toggle. The Agreement nav item should appear active when on /Agreement path.

As a Backend Developer, implement the borrower dashboard API endpoints. Endpoints: GET /api/borrower/dashboard (returns: activeLoan object with amountBorrowed, interestRate, totalRepayable, remainingAmount, dueDate, progressPercent, nachStatus; loanHistory array with past loans; profileSnapshot with name, mobile, employer, nachStatus, kycStatus; eligibleForNewLoan boolean with reason message), GET /api/borrower/loan-history (paginated past loans list: date, amount, interestRate, status: repaid/settled/defaulted), GET /api/borrower/loan-history/{loanId} (read-only detail view of a past loan). Note: Borrower Dashboard page sections (BorrowerDashboard design page) depend on this API.

As a Backend Developer, implement the CRM integration layer (Phase 6, Week 12). Integrate with the client's CRM (new Early Salary module). Flows: 1) On application submission → push application data to CRM via CRM API; 2) On AI scoring completion → write approval score, interest rate recommendation, and decision (auto-approve/uncertain/reject) back to CRM; 3) On approval → trigger disbursement workflow in CRM; 4) On NACH mandate setup → update CRM mandate status. Implement as async background tasks (FastAPI BackgroundTasks or Celery). Include retry logic with exponential backoff for CRM API failures. CRM credentials provided by client in Week 1. Store CRM case ID in loan_applications table for reference. Communication log events (emails/SMS) sourced from CRM and synced back to local DB.

As a Tech Lead, verify the end-to-end integration between the Repayment page frontend and the Repayment Schedule & Payment API. Ensure: summary cards populate from GET /api/applications/{id}/repayment with real totalLoanAmount, remainingBalance, totalPaid, interestCharged; schedule table populates from GET /api/applications/{id}/repayment/schedule; status banner reflects real repaymentStatus; timeline milestones use real data from GET /api/applications/{id}/repayment/timeline; payment methods form submits to POST /api/repayment/pay; document downloads use real pre-signed URLs. Frontend tasks: RepaymentSummaryCards (9a6e0c8c), RepaymentScheduleTable (a115a370), RepaymentStatusBanner (f7d2d5d8), RepaymentTimeline (70243bfd), RepaymentPaymentMethods (4a084d19). Backend task: temp_backend_repayment.

As a Tech Lead, verify the end-to-end integration between the Admin Application Detail page frontend and the Admin Application Detail API and ML scoring endpoints. Ensure: AI Score Card populates from GET /api/admin/applications/{id}/ai-score with real score gauge, zone label, confidence, top 5 features, recommended action and interest rate; personal/employment/loan request sections populate from GET /api/admin/applications/{id}/detail; bank statement analysis and CIBIL summary sections show real parsed data; document viewer fetches pre-signed PDF URLs from GET /api/applications/{id}/documents; manual override buttons (Approve/Reject/Request Info) call PUT /api/applications/{id}/override; communication log populates from GET /api/admin/applications/{id}/communications. Frontend tasks: Admin Application Detail Page sections. Backend tasks: temp_backend_application_detail, temp_backend_document_upload, temp_ai_inference_service.

As a frontend developer, implement the AuditLogPagination section for the AuditLog page using AuditLogPagination.css. Uses useState for currentPage (default 1), perPage (default 25), and jumpInput string. Uses useMemo for safePage (clamped to totalPages) and pageRange built by the buildPageRange() helper which generates a sparse array of page numbers and null ellipsis slots (e.g. [1, null, 5, 6, 7, null, 25]). PER_PAGE_OPTIONS are [10, 25, 50]. Simulated totalResults is 487; totalPages derived as Math.ceil(totalResults / perPage). Renders a results summary text ('Showing X–Y of 487'), a perPage select with handlePerPageChange (useCallback, re-clamps currentPage), Prev/Next buttons (ChevronLeft/ChevronRight lucide-react) with handlePrev/handleNext callbacks, numbered page buttons rendering null slots as ellipsis spans, and a jump-to-page input handling Enter key via handleJumpKeyDown.

As a frontend developer, implement the AuditLogDetails section for the AuditLog page using AuditLogDetails.css. Uses useState for expanded (default true) and detail (initialized with SAMPLE_DETAIL containing id 'CHG-2026-05-28-0042', admin object with name/email/initials/role, ISO timestamp, tLow {old:0.42, new:0.45}, tHigh {old:0.78, new:0.82}, affectedApplications:142, reason, and notes). Computes tLowDiff and tHighDiff for directional styling. Renders a panel (ald-panel) with: a header row containing FileText icon (size 16), change ID title, subtitle, and an X close button (sets expanded false) with aria-label. Body contains a Threshold Values section with ald-threshold-grid showing two ald-threshold-card elements for T_low and T_high, each displaying old→new values with conditional positive/negative CSS class on new value. Also renders admin info (initials avatar, name, email, role), a formatDateTime() formatted timestamp, affected applications count, reason text, notes text, and Info/User/Hash/Clock icons from lucide-react for section labels.

As a frontend developer, implement the AgreementHeader section for the Agreement page. Renders a static header using AGREEMENT_DATA object (title: 'Early Salary Loan Agreement', referenceId: 'ESL-2026-06-00482', date: 'June 1, 2026', borrowerName: 'Rohan Mehta', status: 'active'). Displays a FileText Lucide icon in ah-icon-wrap, an h1 title, and a dynamic status badge (ah-status-active class) with an animated ah-status-dot. Below a horizontal divider, renders a 4-item metadata grid (Reference ID, Agreement Date, Borrower Name, Document Status) using ah-meta/ah-meta-item/ah-meta-label/ah-meta-value CSS classes, with ah-ref applied to the reference value.

As a frontend developer, implement the AgreementTermsAndConditions section for the Agreement page. Uses Three.js (import * as THREE from 'three') for a 3D background canvas element integrated within the terms section. Renders TERMS_CLAUSES array of 4 clause objects (Loan Validity & Sanction, Interest Rate & Cost of Borrowing, Repayment Obligations & Schedule, Penalty & Default Terms), each with a title, body paragraphs array, and a sublist array. Uses useRef and useEffect for Three.js scene setup and useMemo for geometry optimization. Each clause renders body paragraphs and a bulleted sublist. The 3D element serves as a decorative visual layer behind or alongside the legal text content.

As a frontend developer, implement the AgreementLoanDetails section for the Agreement page. Renders a 6-card grid from the loanData array using Lucide icons (Banknote, Percent, Calendar, CreditCard, Receipt, Shield). Cards with highlight: true receive the ald-highlight CSS class. Cards with prefix: 'rupee' receive ald-rupee class on the value element. The insurance card (id: 'insurance') renders an ald-insurance-tag span with a Shield icon. Below the grid, renders a summary bar displaying totalRepayable (53340), disbursalAmount (49000), and interestComponent (3340) values with ald-summary/ald-summary-row/ald-summary-label CSS classes. Section includes a 'Section 3' label and 'Loan Details' h2 heading.

As a frontend developer, implement the AgreementRepaymentSchedule section for the Agreement page. Renders a 22-row repayment schedule table from the scheduleData array (month, dueDate, principal, interest, emi, balance columns). Uses Intl.NumberFormat with en-IN locale (minimumFractionDigits: 2, maximumFractionDigits: 2) via formatCurrency() for all monetary values. Computes totalPrincipal, totalInterest, and totalPayment via Array.reduce() calls on scheduleData. Includes a ChevronRight Lucide icon (likely for row expand or pagination). The last row (month 22) has a different EMI (8752.63) and balance (0.00), indicating final adjusted payment. Renders a summary footer row with computed totals.

As a frontend developer, implement the AgreementFees section for the Agreement page. Renders a feeItems array of 5 items (Processing Fee ₹2,500, Documentation Fee ₹500, Late Payment Penalty waived, Prepayment Charges waived, Cheque Bounce Charges waived). Each fee row (af-fee-row) shows af-fee-name, af-fee-desc, and a dynamic af-fee-amount element — items with type: 'waived' receive af-waived class and display 'Waived' text instead of the amount. Renders a total row below an af-total-divider showing totalFees '₹ 3,000.00'. Includes an AlertTriangle Lucide icon in an af-footnote disclaimer section at the bottom.

As a frontend developer, implement the AgreementRisksAndDisclosures section for the Agreement page. Renders a disclosureCards array with cards for: Default Consequences (FileWarning icon), Prepayment Terms & Charges (Scale icon), and additional risk categories using AlertTriangle, ShieldAlert, UserCheck, Building, Info Lucide icons. Each card body uses JSX with inline <strong> and <span className='ard-risk-highlight'> elements for emphasis — e.g., highlighting '2% per month late penalty', 'credit bureau reporting (CIBIL, Experian, Equifax, CRIF High Mark)', 'immediately due and payable' consequences, and 'legal proceedings' language. Renders structured <ul> bullet lists within each card body for itemized consequences and terms.

As a frontend developer, implement the AgreementConsent section for the Agreement page. Manages 4 CONSENT_ITEMS (read_agreement, electronic_communication, bank_mandate, data_sharing) with checkbox state via useState. Integrates a 3D visual using @react-three/fiber Canvas and @react-three/drei OrbitControls — the CheckmarkRing component uses useRef and useMemo to build a ring geometry with thetaLength calculated as Math.PI * 2 when allChecked is true (all boxes checked) vs Math.PI * 0.01 when not, animating the ring completion. Uses CheckCheck, AlertCircle, ShieldCheck Lucide icons. Each consent item shows a checkbox, label, and expandable detail text. The allChecked derived state drives both the 3D ring animation and a visual completion indicator.

As a frontend developer, implement the Footer section for the Agreement page. This component may already exist from previous pages (Application, Tracker, AuditLog). Renders four columns: Brand column with ftr-logo (ES icon + 'Early Salary' text), ftr-brand-desc, and contact items (Mail, Phone, MapPin Lucide icons with support@earlysalary.com, 1-800-SALARY, Mumbai India); Platform column with quickLinks array (Dashboard, Applications, Tracker, Audit Log); Services column with serviceLinks array (Apply for Loan, Loan Agreement, Disbursement, Repayment); Connect column with socialIcons array (Twitter, Linkedin, Facebook, Instagram as ftr-social-btn buttons). Uses new Date().getFullYear() for dynamic copyright year in ftr-footer.

As a frontend developer, implement the Navbar section for the Disbursement page. Reuse the existing Navbar component from Agreement (task 89915c6d-a402-45a2-8130-47e31abd30c0) if already implemented. The Navbar uses useState for mobileOpen and scrolled states, useEffect to detect window.location.pathname for activePath highlighting and scroll events (passive listener setting scrolled > 8px). NAV_ITEMS array includes Dashboard, Applications, Application, Tracker, Audit Log, Agreement, Disbursement, and Repayment with lucide-react icons. Renders a desktop link list with nb-active class on matching href, a Sign In anchor button, and an animated hamburger button (nb-open class toggle). A mobile drawer (nb-mobile-drawer / nb-drawer-open) renders below the nav. Import from '../styles/Navbar.css'.

As a Tech Lead, verify the end-to-end integration between the bank statement parser microservice and the ML approval/interest rate models. Ensure: on document upload of bank statement PDF, parser is triggered automatically (async); parsed features (avgMonthlyCredit, salaryConsistency, bounceCount etc.) are stored and fed as features into the approval classifier; approval classifier runs and stores score; interest rate regressor runs conditionally on approved cases; all outputs (score, confidence, recommendedRate, top5Features) are written to the application record and surfaced via GET /api/admin/applications/{id}/ai-score. Also verify CRM receives the score and decision. Tasks: temp_bank_statement_parser, temp_ml_approval_model, temp_ml_interest_rate_model, temp_ai_inference_service, temp_crm_integration.

As a frontend developer, implement the AgreementSignature section for the Agreement page. Features a freehand signature canvas (canvasRef) with mouse and touch support — startDraw, draw, and stop handlers using getCanvasPos() to normalize mouse/touch coordinates, with DevicePixelRatio-aware canvas sizing on resize. State includes isDrawing, hasStroke, lastPos, and sigVerified. OTP flow uses useState for otpDigits (Array(6).fill('')), otpSent, otpVerified, otpStatus ('success'|'error'|'sent'), otpMessage, and otpCooldown (countdown timer). otpInputRefs tracks 6 individual digit input refs. sigDate initializes from new Date() formatted as YYYY-MM-DD. allVerified derived state requires both sigVerified && otpVerified. Includes Trash2 (clear canvas), PenLine, ShieldCheck, CheckCircle2, AlertTriangle, Smartphone, Send, Lock Lucide icons for the signature pad, OTP send button, and verification status indicators.

As a frontend developer, implement the DisbursementHeader section for the Disbursement page. Uses a useRef (iconRef) to mount a raw Three.js scene into a container div. Scene setup includes PerspectiveCamera at position (0, 0.3, 3.5), WebGLRenderer with alpha/antialias, AmbientLight (0x3b82f6), DirectionalLight, and PointLight (0xf59e0b). A THREE.Group contains: a CylinderGeometry coin (0xfbbf24, metalness 0.55, roughness 0.25, emissive 0xf59e0b) rotated on x-axis; a TorusGeometry ring (0x3b82f6, emissive 0x1e3a8a); two CylinderGeometry cone arrows (up and down) in blue. Animation loop rotates group.rotation.y += 0.008 and coin.rotation.z += 0.015. Includes resize handler updating camera aspect and renderer size. Cleanup cancels animation frame and removes event listener. Import from '../styles/DisbursementHeader.css'.

As a frontend developer, implement the DisbursementStatusCard section for the Disbursement page. Uses @react-three/fiber Canvas with @react-three/drei Float, MeshTransmissionMaterial, Sphere, and Torus for a 3D animated coin model. CoinModel component uses useRef for groupRef and innerRingRef; useFrame animates group.rotation.y += 0.004, group.position.y with sin wave, and innerRingRef.rotation.z += 0.003. DISBURSEMENT_DATA object holds loanId 'ESL-2026-08472', status 'processing', amountApproved 85000 (₹), requestDate, estimatedDate, bankName HDFC Bank, bankAccount masked, disbursementMethod NEFT, progress 65, and progressSteps array. STATUS_MAP maps pending/processing/completed/failed to badge and card CSS classes. useState tracks expand/collapse for details. Icons from lucide-react: ArrowDownToLine, Eye, ChevronDown, ChevronUp. Import from '../styles/DisbursementStatusCard.css'.

As a frontend developer, implement the DisbursementTimeline section for the Disbursement page. Uses @react-three/fiber Canvas with useFrame for TimelinePath3D component — groupRef oscillates with Math.sin(clock.elapsedTime * 0.2) * 0.04 on rotation.y. useMemo builds nodes array with per-step color logic: failed (#EF4444), completed (#3B82F6), active (#3B82F6), inactive (#9CA3AF). Renders a boxGeometry connecting line (grey, opacity 0.3), completed segment meshes (blue, emissive), and sphereGeometry nodes with radius and emissiveIntensity varying by active/completed/failed state. Lucide icons used: CheckCircle, Clock, XCircle, FileText, ShieldCheck, Building2, ArrowRightLeft, Wallet. Timeline steps are rendered as HTML rows alongside the 3D canvas. Props include stepCount, activeIndex, failedIndex. Import from '../styles/DisbursementTimeline.css'.

As a frontend developer, implement the DisbursementBreakdown section for the Disbursement page. Registers ChartJS with ArcElement, Tooltip, Legend and renders a Doughnut chart (react-chartjs-2) with cutout '68%'. breakdownData array contains three items — Principal Amount (₹50,000 / 72.5%), Interest Deducted (₹3,750 / 5.4%), Processing Fee (₹1,250 / 1.8%) — mapped to backgroundColor ['#1E3A8A', '#F59E0B', '#EF4444']. chartOptions includes animateScale/animateRotate (800ms, easeInOutQuart), custom tooltip with white background and Inter font, and legend display false. Renders a dbrk-grid with left column of dbrk-row items (indicator dot, label, amount, percentage bar) and right column containing the Doughnut chart. Net disbursed amount (₹45,000) and total requested (₹69,000) shown as summary. PieChart icon from lucide-react. Import from '../styles/DisbursementBreakdown.css'.

As a frontend developer, implement the DisbursementRepaymentSchedule section for the Disbursement page. useState manages viewMode ('table' | 'calendar'), sortField ('dueDate'), sortDir ('asc'/'desc'), calendarMonth, and calendarYear. SCHEDULE_DATA contains 9 EMI entries with id, dueDate, emi (₹12,450), principal, interest, and status (paid/pending/upcoming). useMemo sorts data by sortField/sortDir. Table view renders sortable columns (Due Date, EMI, Principal, Interest, Status) with ChevronLeft/ChevronRight sort icons and STATUS_ICONS map (CheckCircle2, Clock, AlertTriangle, CalendarClock). Calendar view uses a raw Three.js canvas (canvasRef, animRef) alongside a month grid built from Date calculations with DAY_HEADERS and MONTHS arrays, highlighting EMI due dates. Navigation with ChevronLeft/ChevronRight changes calendarMonth/calendarYear. Download button with FileDown icon. Utility functions formatCurrency (Intl.NumberFormat en-IN INR), formatDate, getMonthAbbr, getDay. Lucide icons: Calendar, Download, Table, Circle, CalendarDays. Import from '../styles/DisbursementRepaymentSchedule.css'.

As a frontend developer, implement the DisbursementDocuments section for the Disbursement page. DOCUMENTS array contains four entries: Loan Agreement (ScrollText icon, signed, 1.2 MB PDF), Disbursement Receipt (Receipt icon, 380 KB PDF), Repayment Schedule (FileDigit icon, 520 KB PDF), Bank Statement Extract (FileArchive icon, 960 KB PDF). TiltCard wrapper component uses useRef (cardRef) and useState (tiltStyle) with onMouseMove computing rotateX/rotateY from cursor position relative to card center (max ±4 degrees, perspective 800px) and onMouseLeave resetting to 0. Each document card rendered inside TiltCard shows icon, title, type badge, issueDate with Calendar icon, fileSize, format, signed indicator with CheckCircle2, and a Download button with Download icon. Empty state renders with FileText icon and fallback message. Import from '../styles/DisbursementDocuments.css'.

As a frontend developer, implement the DisbursementSupportCTA section for the Disbursement page. Uses @react-three/fiber Canvas (camera position [0,0,4], fov 55, dpr [1, 1.5]) as a decorative background. FloatingCoin component uses useRef (meshRef) and useFrame to animate position.y with sin wave (startY + sin(t * speed) * 0.4), rotation.x (t * 0.2), rotation.z (sin(t * 0.35) * 0.3), and material.opacity (0.18 + sin(t * 0.7) * 0.06). CoinField uses useMemo to generate 22 coins with random positions, colors (#3B82F6 or #F59E0B), delay, radius (0.12–0.34), and speed (0.5–1.3). Coins use sphereGeometry with transparent meshStandardMaterial (opacity 0.22). Content overlay shows HelpCircle badge icon, heading 'Need Help with Your Disbursement?', description text, and CTA buttons with MessageCircle (Live Chat), Phone (Call Support), Mail (Email Us), FileText (FAQ) icons and ArrowRight indicators. Import from '../styles/DisbursementSupportCTA.css'.

As a frontend developer, implement the Footer section for the Disbursement page. Reuse the existing Footer component from Agreement or Tracker pages if already implemented. Renders four columns: Brand column with 'ES' logo icon, 'Early Salary' text, brand description, and contact items using Mail, Phone, MapPin lucide icons (support@earlysalary.com, 1-800-SALARY, Mumbai India). Platform column with quickLinks array (Dashboard, Applications, Tracker, Audit Log). Services column with serviceLinks array (Apply for Loan, Agreement, Disbursement, Repayment). Social/Connect column with socialIcons array (Twitter, Linkedin, Facebook, Instagram) rendered as ftr-social-btn buttons. currentYear computed via new Date().getFullYear() for copyright. Import from '../styles/Footer.css'.

As a frontend developer, implement the Navbar section for the Repayment page. This component (imported from '../styles/Navbar.css') uses useState for mobileOpen and scrolled states, and useEffect to track window.location.pathname for activePath and window scroll events. Renders NAV_ITEMS array with 8 routes including Dashboard, Applications, Application, Tracker, AuditLog, Agreement, Disbursement, and Repayment (with lucide-react icons: LayoutDashboard, FileText, AppWindow, MapPin, ScrollText, Handshake, Banknote, RotateCcw). Includes desktop links with nb-active class for current route, a Sign In button linking to /Login, a hamburger button (3 nb-hamburger-line spans) with aria-expanded, and a mobile drawer with nb-drawer-open class toggle. The nb-scrolled class applies on scroll > 8px. Note: this component likely already exists from Agreement and Disbursement pages — reuse if available.

As a frontend developer, implement the AgreementActions section for the Agreement page. Manages a signed boolean state via useState(false). Pre-sign state renders: an aa-prompt div with title/subtitle, three action buttons — aa-btn-sign (PenTool icon, calls handleSign setting signed=true), aa-btn-download (Download icon, creates a temporary anchor element with download='loan-agreement-ESL-2026-0042.pdf' and calls link.click()), aa-btn-print (Printer icon, calls window.print()), an aa-separator with 'or' text between decorative lines, and a 'Back to Dashboard' link with ArrowLeft icon. Post-sign state renders: an aa-success div with CheckCircle icon, success message, and redirect notice, plus the download/print buttons remain. Conditionally renders based on signed state.

As a frontend developer, implement the RepaymentHeader section for the Repayment page. Uses useState hooks for status ('on-track'), lastUpdated ('2026-05-31 16:45 IST'), and loanRef ('ESL-2026-04821'). Renders a two-row layout inside rh-inner: top row has a ChevronLeft back link to /Dashboard and a Clock icon last-updated timestamp; main row has an rh-title-group (h1 with 'Repayment' + rh-title-accent 'Schedule' span, and a Hash icon loan reference badge) plus a dynamic rh-status-badge that switches between rh-on-track, rh-overdue, and rh-at-risk CSS classes with a pulsing rh-status-dot. A decorative rh-accent-line div sits below. Imported from '../styles/RepaymentHeader.css'.

As a frontend developer, implement the RepaymentStatusBanner section for the Repayment page. Features a Three.js/React Three Fiber Canvas with a StatusRing component that generates 60 animated sphere particles on a ring (radius 3.5) using useMemo, animating via useFrame with per-particle breathing (breathe = 1 + sin * 0.15) and z-oscillation. STATUS_CONFIG defines three states — ontrack (#10B981), duesoon (#F59E0B), overdue (#EF4444) — each with nextDue date, amountDue, daysRemaining, and daysLabel. Component uses useState for status and dismissed; renders a dismissible banner with CreditCard icon, status badge, payment due info, days-remaining counter, ArrowRight CTA button, X dismiss button, and an AlertTriangle warning for overdue. Canvas is positioned as an ambient background layer inside canvasContainerRef. Imported from '../styles/RepaymentStatusBanner.css'.

As a frontend developer, implement the RepaymentSummaryCards section for the Repayment page. Renders a static rsc-grid of 4 cards from the summaryCards array: Total Loan Amount (Landmark icon, ₹2,50,000, no progress bar), Remaining Balance (Wallet icon, ₹1,12,500, 55% progress bar), Total Paid (CircleCheck icon, ₹1,37,500, TrendingUp trend badge, 45% progress bar), and Interest Charged (Percent icon, ₹18,750, Minus neutral trend badge). Each card uses rsc-card--{id} modifier class. Trend elements render conditionally: 'up' shows TrendingUp + 'On track', 'down' shows TrendingDown + 'Overdue', 'neutral' shows Minus + 'Fixed'. Progress bars use inline style width. Imported from '../styles/RepaymentSummaryCards.css'.

As a frontend developer, implement the RepaymentScheduleTable section for the Repayment page. Features a 30-row PAYMENT_SCHEDULE dataset with payment_number, due_date, principal, interest, total_amount, and status fields (paid/upcoming). Uses useState for searchQuery, statusFilter, currentPage, and sortConfig; useMemo for filtered/sorted/paginated rows. Includes a Search input, Filter dropdown (ChevronDown, Filter icon), and paginator with ChevronLeft/ChevronRight. Status cells render CheckCircle2 (paid), AlertCircle (overdue), or Clock (upcoming) icons. Integrates a React Three Fiber Canvas with Torus and Sphere from @react-three/drei as a decorative 3D background element. An empty state renders FileSearch icon when no results match. Imported from '../styles/RepaymentScheduleTable.css'.

As a frontend developer, implement the RepaymentTimeline section for the Repayment page. Renders a 3D interactive timeline using React Three Fiber Canvas with OrbitControls from @react-three/drei. The MILESTONES array defines 11 nodes (disbursement + 9 payments + final payoff) each with id, label, date, amount, status, 3D position, and detail text. STATUS_COLORS maps completed (#1E3A8A), current (#F59E0B), future (#9CA3AF), and disbursement (#EF4444) to hex and emissive values. Uses useFrame for animation, useRef for canvas/group refs, useMemo for geometry, useCallback for interaction handlers, and useEffect for resize/setup. Supports click-to-select milestone with detail panel overlay. Imported from '../styles/RepaymentTimeline.css'.

As a frontend developer, implement the RepaymentPaymentMethods section for the Repayment page. Features a CoinMesh 3D component rendered in a PaymentScene Canvas (camera position [0,0,3.8], fov 42) with a rotating cylinderGeometry coin disc, two torusGeometry rings, and directional lighting; animated via useFrame with rotation.y and vertical sine oscillation. PAYMENT_METHODS dropdown has 4 options (auto_debit, upi, net_banking, debit_card). AMOUNT_PRESETS renders 5 preset buttons (₹5k, ₹10k, ₹25k, ₹50k, Full Balance). Component uses useState for amount, paymentMethod, activePreset, and isProcessing. handlePresetClick sets amount to 87450 for 'full' preset. handleAmountChange strips non-numeric chars. handlePayNow triggers isProcessing state. Renders Landmark, ArrowRightLeft, CreditCard, IndianRupee, Banknote, Info, Send icons. Imported from '../styles/RepaymentPaymentMethods.css'.

As a frontend developer, implement the RepaymentDocuments section for the Repayment page. Features a DocumentScene Canvas with 4 DocumentModel components using @react-three/drei Float, RoundedBox, and OrbitControls. Each DocumentModel renders: a RoundedBox (args [1.4,1.8,0.06], radius 0.08) as the sheet, a colored header stripe box, 4 body-line boxes in #d1d5db, a signature line, and a semi-transparent red stamp box. Float provides speed=1.8, rotationIntensity=0.3. Documents are positioned at varying depths [-0.3 to -0.6 z] with different scale ratios (0.65–1.0). The 2D panel shows document cards with FileText, Download, Clock, Calendar, Receipt, FileBadge, CheckCircle2 icons; uses useState for hoveredDoc (tracked via useRef and useCallback handlers) and useEffect for canvas sizing. Imported from '../styles/RepaymentDocuments.css'.

As a frontend developer, implement the RepaymentSupport section for the Repayment page. Uses framer-motion (motion, AnimatePresence) for accordion animations and ChevronDown, MessageCircle, Mail from lucide-react. FAQ_DATA array has 3 items (id: payment, missed, prepay) each with question and JSX answer containing paragraphs with strong tags and unordered lists. Uses useState for openId to track expanded accordion item; useCallback for toggle handler. A Three.js ambient canvas (created via useRef and useEffect) renders particle/background decoration using THREE directly (not React Three Fiber). Includes a contact support CTA section with MessageCircle (Live Chat) and Mail (Email Support) buttons. Imported from '../styles/RepaymentSupport.css'.

As a frontend developer, implement the Footer section for the Repayment page. Renders a 4-column layout inside ftr-inner: brand column with ftr-logo (ES icon + 'Early Salary' text), brand description paragraph, and 3 contact items (Mail/support@earlysalary.com, Phone/1-800-SALARY, MapPin/Mumbai) using lucide-react icons; Platform column with quickLinks array (Dashboard, Applications, Tracker, AuditLog); Services column with serviceLinks array (Apply for Loan, Agreement, Disbursement, Repayment); and Connect column with socialIcons array (Twitter, Linkedin, Facebook, Instagram) rendered as ftr-social-btn buttons. Footer displays dynamic currentYear via new Date().getFullYear(). Note: this component likely already exists from Agreement and Disbursement pages — reuse if available. Imported from '../styles/Footer.css'.