As a frontend developer, I want to implement the global color palette, typography, design tokens, and component base styles from the mock-design pages so that all pages are visually consistent. This includes: Deep Blue (#003366), Emerald Green (#50C878), dark-mode glassmorphic surfaces, star-field background canvas, frosted-glass nav styles, and shared CSS custom properties. Remove any scaffold pages not in the user flows (welcome page, ai-assistant page, generic settings page if not needed). This task must be completed before any individual page implementation begins.
As a frontend developer, I want to implement the Login page based on the existing v2 JSX design so that Admin, RM, and User personas can sign in. The page includes: frosted-glass NavBar with constellation logo, role-selector tabs (User/Admin/RM), email/phone input, password input with show/hide toggle, Forgot Password link, Sign In CTA with emerald glow pulse, WhatsApp OTP login button, TrustSignals strip (SEBI & RBI Compliant, Field-Level Encryption, Aadhaar eKYC Verified), and minimal Footer. On success, Admin/RM navigates to Dashboard, User to Onboarding or Dashboard. Design is ready (v2).
As a backend developer, I want to implement authentication and session management APIs so that all personas (User, Admin, RM) can securely sign in, maintain sessions, and sign out. Includes: POST /auth/login (email/phone + password or OTP), POST /auth/whatsapp-otp (WhatsApp OTP generation and verification), POST /auth/logout, GET /auth/me (current session info), JWT token issuance, refresh token rotation, and role-based access control middleware.
As a frontend developer, I want to implement the Onboarding page based on the existing v2 JSX design so that Users can complete Aadhaar eKYC after starting a WhatsApp conversation. Includes: multi-step progress indicator, Aadhaar number input, OTP verification step, eKYC status display, CKYC check, and Account Aggregator consent flow. On completion, navigates to Dashboard (Portfolio view). Design is ready (v2).
As a frontend developer, I want to implement the Dashboard page based on the existing v2 JSX design so that Admin and RM can view an overview of platform activity. Includes: sticky TopBar with breadcrumb, collapsible Sidebar with nav links (Dashboard active), KPI stat cards (Total Users, KYC Pending, Active SIPs, Escalations), recent transaction feed, RM activity panel, and system health indicators. Admin sees operational overview; RM sees their assigned escalations. Navigates to KYC Monitor, Transactions, RM Management, Escalations. Design is ready (v2).
As a frontend developer, I want to implement the Broking page based on the existing v1 JSX design so that Users can view and manage their broking portfolio via Angel One SmartAPI. Includes: portfolio value header, holdings table (symbol, qty, avg buy price, LTP, P&L, P&L%), sector allocation chart, order placement form (buy/sell, symbol search, qty, order type), open orders list, and order status badges. Design is ready (v1).
As a backend developer, I want to implement Aadhaar eKYC, CKYC, and Account Aggregator APIs so that Users can complete onboarding. Includes: POST /kyc/aadhaar/initiate, POST /kyc/aadhaar/verify-otp, GET /kyc/status/:userId, POST /kyc/ckyc/pull, POST /kyc/account-aggregator/consent, GET /kyc/account-aggregator/data. Stores KYC state, audit logs, and integrates CIBIL credit score pull.
As a frontend developer, I want to implement the Users page based on the existing v2 JSX design so that Admins can manage customer profiles, KYC status, and RM assignments. Includes: TopBar, Sidebar (Users active), stat cards, search + filter toolbar (KYC Status, Product Access, RM Assigned), user data table (Avatar+Name, Phone, Email, KYC badge, Products enrolled, Assigned RM, Last Active, Actions), bulk action bar, pagination, and a slide-in User Drawer Panel with tabbed profile/KYC/portfolio/transaction details and Assign RM action. Design is ready (v2).
As a frontend developer, I want to implement the Escalations page based on the existing v2 JSX design so that RMs can handle escalation requests flagged by the AI engine. Includes: TopBar, Sidebar (Escalations active), stat chips (Open, In Progress, Resolved Today), filterable escalation table (Client, Type, Priority, AI Trigger reason, Assigned RM, Status, Actions), escalation detail slide-in panel with AI context, client info, and resolve/callback actions. Navigates to Client Profile for full client view. Design is ready (v2).
As a frontend developer, I want to implement the Transactions page based on the existing v2 JSX design so that Admins can view transaction logs and override workflows. Includes: sticky TopBar, Sidebar (Transactions active), stat cards (Total Today, Completed, Pending, Volume), type-filter tabs (All/Invest/Redeem/Payments/Loans/Insurance), searchable transaction table with TX ID, user, product, amount, date, status badge, view and override action buttons, paginator, and a workflow override modal with action selector. Design is ready (v2).
As a frontend developer, I want to implement the RM Management page based on the existing v2 JSX design so that Admins can assign and manage Relationship Managers. Includes: TopBar, Sidebar (RM Management active), RM stat cards (Total RMs, Active, Avg Clients), RM listing table with name, zone, client count, escalation load, status, and assign/edit actions. Supports assigning RMs to clients and viewing RM performance. Navigates to Users page for client profile management. Design is ready (v2).
As a frontend developer, I want to implement the Insurance page based on the existing v2 JSX design so that Users can request insurance quotes and issue policies via Digit/Acko. Includes: product category selector (Health, Life, Motor, Term), quote request form (insurer, coverage amount, tenure, nominees), quote comparison cards, policy issuance flow, active policies list (policy number, insurer, sum assured, premium due date, renewal action), and document download. Design is ready (v2).
As a frontend developer, I want to implement the WhatsApp conversation interface page based on the existing v2 JSX design so that Users can start their financial journey via a WhatsApp-style chat UI. Includes: chat bubble list, AI-governed response display, intent suggestion chips (Invest, Redeem, Get Loan, Insurance Quote), multi-turn conversation support, and escalation-to-RM trigger. Entry point for User flow, leads to Onboarding. Design is ready (v2).
As a frontend developer, I want to implement the Mutual Funds page based on the existing v2 JSX design so that Users can invest via SIP or lump sum and redeem funds. Includes: portfolio overview banner (total MF AUM, returns), scheme search/filter, SIP creation form (scheme, amount, frequency, start date), lump sum invest form, active SIP list with pause/stop actions, redemption flow (units/amount selector, confirm), and order status tracker. Integrates NSE NMF II and BSE StAR MF rails. Design is ready (v2).
As a frontend developer, I want to implement the Lending page based on the existing v2 JSX design so that Users can apply for loans and check eligibility via FinBox/Decentro. Includes: loan eligibility calculator (income, employment type, desired amount), active loan dashboard (outstanding balance, EMI, next due date, repayment progress bar), loan application multi-step form (personal details, employment, bank account, document upload), offer comparison panel, and application status tracker. Design is ready (v2).
As a frontend developer, I want to implement the KYC Monitor page based on the existing v2 JSX design so that Admins can review KYC application statuses. Includes: sticky TopBar, Sidebar (KYC Monitor active), summary stat cards (Total KYC, Verified, Pending, Rejected), filterable user KYC table with columns (User, Aadhaar Status, CIBIL Status, CKYC, eKYC Date, Action), status badges, and manual override/approve/reject actions. Design is ready (v2).
As a frontend developer, I want to implement the Schedule page based on the existing v1 JSX design so that RMs can book and manage callbacks with clients. Includes: TopBar, Sidebar (Schedule active), weekly/monthly calendar view, callback appointment cards (client name, time, purpose, status), booking form modal (client selector, date/time picker, notes), and upcoming appointments list. Navigates from Dashboard for RMs. Design is ready (v1).
As a backend developer, I want to implement loan application and eligibility APIs via FinBox and Decentro so that Users can apply for loans. Includes: POST /lending/eligibility-check, GET /lending/offers/:userId, POST /lending/apply, GET /lending/application-status/:appId, GET /lending/active-loans/:userId, POST /lending/document-upload. Integrates CIBIL score from KYC layer for eligibility decisions.
As a frontend developer, I want to implement the Payments page based on the existing v2 JSX design so that Users can confirm UPI payments and manage mandates after completing investment, loan, or insurance flows. Includes: payment summary card (amount, purpose, destination), UPI payment confirmation with VPA input, NACH mandate setup form, Razorpay payment gateway embed, payment status result screen (success/pending/failed), and transaction receipt download. Design is ready (v2).
As a frontend developer, I want to implement the Client Profile page based on the existing v2 JSX design so that RMs can view full client details when handling escalations. Includes: ProfileHeader card (avatar, name, phone, WhatsApp status, quick-stat chips, action buttons), KYC Status Banner, Financial Snapshot (AUM, segmented bar, mini-stat grid), RM Assignment Card (assigned RM details, contact buttons, last interaction, reassign action), Portfolio Breakdown tabs (MF/Broking/Insurance/Lending), Transaction History, and Escalation Timeline. Design is ready (v2).
As an AI engineer, I want to implement the AI orchestration engine so that user WhatsApp messages are classified by intent, entities extracted, and routed to the correct financial workflow. Includes: intent classification (Investment/Broking/Lending/Insurance/Informational/Escalation), entity extraction (amount, scheme, tenure, risk preference), multi-turn conversation state management, workflow routing logic, escalation trigger detection (sentiment, repeated failure, high-value flag), guardrail enforcement (no hallucinated financial data, deterministic confirmations), and AI decision audit trace logging. Uses LiteLLM for LLM routing across GPT/Claude/Gemini models.
As a backend developer, I want to implement broking APIs via Angel One SmartAPI so that Users can view their portfolio and place orders. Includes: GET /broking/portfolio/:userId, GET /broking/holdings/:userId, POST /broking/order/place, GET /broking/orders/:userId, GET /broking/order-status/:orderId, POST /broking/token/refresh. Includes token lifecycle management and status synchronization.
As a backend developer, I want to implement insurance quote and policy issuance APIs via Digit and Acko so that Users can get quotes and purchase policies. Includes: POST /insurance/quote/request, GET /insurance/quotes/:sessionId, POST /insurance/policy/issue, GET /insurance/policies/:userId, POST /insurance/renewal, GET /insurance/policy-document/:policyId. Handles document delivery and renewal tracking.
As a backend developer, I want to implement admin dashboard APIs so that Admins can monitor KYC, transactions, users, and RM assignments. Includes: GET /admin/stats/overview, GET /admin/users (paginated, filtered), GET /admin/kyc/monitor (status filters), GET /admin/transactions (filters, search), POST /admin/transactions/override, GET /admin/rm/list, POST /admin/rm/assign, GET /admin/audit-logs. Enforces immutable audit log writes.
As a backend developer, I want to implement mutual fund transaction APIs so that Users can invest and redeem via NSE NMF II and BSE StAR MF rails. Includes: GET /mf/schemes (search & filter), POST /mf/sip/create, POST /mf/lumpsum/invest, POST /mf/redeem, GET /mf/orders/:userId, GET /mf/portfolio/:userId, POST /mf/sip/pause, POST /mf/sip/stop. Includes order status sync, reconciliation, and idempotent execution.
As a backend developer, I want to implement escalation management and RM callback scheduling APIs so that RMs can handle AI-flagged escalations. Includes: GET /escalations (filtered by RM/status), POST /escalations/resolve, POST /escalations/assign-rm, GET /escalations/:id/context, POST /schedule/callback, GET /schedule/callbacks/:rmId, PUT /schedule/callback/:id. Implements escalation matrix and AI decision trace logging.
As a backend developer, I want to implement the WhatsApp Business API webhook ingestion layer so that incoming messages are received, verified, parsed, and routed to the AI orchestration engine. Includes: POST /webhook/whatsapp (signature verification, message parsing), outbound message sending via WhatsApp API (text, quick-reply buttons, list messages), session context retrieval, and delivery status webhook handling.
As a backend developer, I want to implement UPI, Razorpay, and NACH mandate APIs so that Users can confirm payments after investing, applying for loans, or purchasing insurance. Includes: POST /payments/upi/initiate, POST /payments/razorpay/create-order, POST /payments/razorpay/webhook, POST /payments/nach/mandate-setup, GET /payments/status/:transactionId, POST /payments/receipt/:transactionId. Implements idempotent handling and webhook signature verification.
As a backend developer, I want to implement centralized observability and immutable audit logging so that all financial transactions, AI decisions, KYC events, and operational overrides are traceable. Includes: structured logging with correlation IDs, immutable audit log table (append-only), AI decision trace storage, API failure rate metrics, intent accuracy tracking, transaction reconciliation accuracy monitoring, and a health-check endpoint. Integrates with existing infrastructure.
No comments yet. Be the first!