# Product Requirements Document: SIP Calculator

## 1. Overview

The SIP (Systematic Investment Plan) Calculator is a single-page financial planning tool that enables users to calculate potential returns from systematic investments in mutual funds or other investment vehicles. The application allows users to input investment parameters (monthly investment amount, expected rate of return, and investment duration) and instantly visualize the projected maturity value, total investment, and wealth gained through compound growth. This tool helps investors make informed decisions about their long-term investment strategies.

## 2. User Roles

### Anonymous User (Default Role)
- Access the SIP calculator interface without authentication
- Input investment parameters (monthly amount, rate of return, time period)
- View calculated results and projections
- See visual representation of investment growth
- Reset calculator inputs
- No data persistence or account management required

**Note:** This application does not require user authentication or authorization. All functionality is available to any visitor.

## 3. Core Entities

### CalculationInput
Represents the user-provided parameters for SIP calculation.
- **monthlyInvestment**: The amount invested every month (numeric value)
- **expectedReturnRate**: Annual expected rate of return as a percentage
- **timePeriod**: Investment duration in years
- **timestamp**: When the calculation was performed (for analytics)

### CalculationResult
Represents the computed output from the SIP calculation.
- **totalInvestment**: Total amount invested over the period (monthlyInvestment × months)
- **estimatedReturns**: Wealth gained (maturityValue - totalInvestment)
- **maturityValue**: Total corpus at the end of investment period
- **calculationId**: Unique identifier for this calculation
- **inputParameters**: Reference to the CalculationInput used

### ChartDataPoint
Represents data points for visualization of investment growth over time.
- **year**: Year number in the investment timeline
- **investedAmount**: Cumulative amount invested up to this year
- **projectedValue**: Projected portfolio value at this year
- **calculationId**: Reference to parent calculation

## 4. Entity Relationships

```
CalculationInput (1) ─── (1) CalculationResult
    │
    └─── (1:N) ChartDataPoint
```

**Relationships:**
- **CalculationInput to CalculationResult**: One-to-One — Each input set generates one result
- **CalculationResult to ChartDataPoint**: One-to-Many — Each calculation produces multiple data points for visualization (one per year or month depending on granularity)

**Note:** Since this is a stateless calculator without user accounts, entities are ephemeral and exist only during the user session. No persistent database relationships are required.

## 5. Key Workflows

### 5.1 Primary Calculation Workflow

**Workflow Name:** Calculate SIP Returns

**Steps:**
1. User lands on the calculator page
2. System displays default values in all input fields:
   - Monthly Investment: ₹10,000
   - Expected Return Rate: 12% per annum
   - Time Period: 10 years
3. System automatically calculates and displays results with default values
4. User adjusts input parameters using sliders or text inputs
5. System validates inputs in real-time
6. System recalculates results immediately upon input change (debounced)
7. System updates:
   - Total Investment amount
   - Estimated Returns amount
   - Maturity Value
   - Visual chart showing growth trajectory
8. User can continue adjusting parameters to explore different scenarios
9. User can reset to default values using reset button

### 5.2 Input Modification Workflow

**Workflow Name:** Adjust Investment Parameters

**Steps:**
1. User interacts with any input control (slider or text field)
2. System validates input against business rules
3. If invalid:
   - Display inline error message
   - Prevent calculation
   - Highlight invalid field
4. If valid:
   - Clear any previous error messages
   - Trigger calculation with 300ms debounce
   - Update all result displays
   - Regenerate chart with new data

### 5.3 Visualization Workflow

**Workflow Name:** Display Investment Growth Chart

**Steps:**
1. System receives validated input parameters
2. System calculates year-by-year breakdown:
   - For each year from 1 to timePeriod
   - Calculate cumulative investment
   - Calculate compound interest-adjusted value
3. System generates array of ChartDataPoints
4. System renders interactive chart showing:
   - X-axis: Years
   - Y-axis: Amount in currency
   - Two data series: Total Investment vs. Projected Value
5. User can hover over chart to see exact values at any point
6. Chart updates smoothly when inputs change

## 6. Features & Requirements

### 6.1 Input Module

**FR-1.1: Monthly Investment Input**
- Display labeled numeric input field for monthly investment amount
- Provide slider control for visual adjustment (range: ₹500 - ₹1,00,000)
- Allow direct text entry with currency formatting
- Sync slider and text input bidirectionally
- Display currency symbol (₹) appropriately

**FR-1.2: Expected Return Rate Input**
- Display labeled numeric input for annual return percentage
- Provide slider control (range: 1% - 30%)
- Allow direct text entry
- Display percentage symbol (%)
- Sync slider and text input bidirectionally

**FR-1.3: Time Period Input**
- Display labeled numeric input for investment duration in years
- Provide slider control (range: 1 - 40 years)
- Allow direct text entry
- Display unit label ("years")
- Sync slider and text input bidirectionally

**FR-1.4: Input Controls**
- Provide "Reset" button to restore default values
- Implement increment/decrement buttons for fine-tuning
- Support keyboard navigation and input

### 6.2 Calculation Engine Module

**FR-2.1: SIP Formula Implementation**
- Implement standard SIP calculation formula:
  ```
  M = P × ({[1 + i]^n – 1} / i) × (1 + i)
  Where:
  M = Maturity Value
  P = Monthly investment amount
  i = Periodic interest rate (annual rate / 12 / 100)
  n = Total number of monthly installments (years × 12)
  ```

**FR-2.2: Real-time Calculation**
- Recalculate results on any input change
- Debounce calculation by 300ms to prevent excessive processing
- Calculate:
  - Total Investment = Monthly Investment × Months
  - Maturity Value = Apply SIP formula
  - Estimated Returns = Maturity Value - Total Investment

**FR-2.3: Breakdown Calculation**
- Generate year-wise or month-wise breakdown for charting
- Calculate cumulative investment at each interval
- Calculate projected value at each interval using compound interest

### 6.3 Results Display Module

**FR-3.1: Summary Cards**
- Display three prominent result cards:
  1. **Total Investment**: Sum of all monthly investments
  2. **Estimated Returns**: Wealth gained through compounding
  3. **Maturity Value**: Final corpus amount
- Format all amounts with proper currency notation (₹ symbol, commas)
- Use clear labels and large, readable fonts
- Highlight maturity value as primary metric

**FR-3.2: Number Formatting**
- Format large numbers with Indian numbering system (lakhs, crores)
- Display decimals only when relevant (max 2 decimal places)
- Use comma separators (e.g., ₹10,00,000)
- Handle edge cases (zero, very large numbers)

### 6.4 Visualization Module

**FR-4.1: Growth Chart**
- Render interactive line or area chart
- Display two data series:
  1. Total Invested Amount (cumulative)
  2. Projected Portfolio Value (with returns)
- Use distinct colors for each series
- Label axes clearly (Years/Time, Amount)

**FR-4.2: Chart Interactivity**
- Enable hover/touch to view exact values at any point
- Display tooltip with:
  - Year/period
  - Investment amount
  - Projected value
  - Gains up to that point
- Animate chart updates when inputs change

**FR-4.3: Chart Responsiveness**
- Adapt chart size to screen dimensions
- Maintain readability on mobile devices
- Use appropriate aspect ratio

### 6.5 User Interface Module

**FR-5.1: Single Page Layout**
- Display all elements on one page without scrolling (desktop)
- Organize layout logically:
  1. Title/header
  2. Input controls section
  3. Results display section
  4. Visualization section
- Use clear visual hierarchy

**FR-5.2: Responsive Design**
- Adapt layout for desktop, tablet, and mobile screens
- Stack elements vertically on mobile
- Maintain touch-friendly control sizes (minimum 44×44px)
- Ensure text readability on all devices

**FR-5.3: Accessibility**
- Provide clear labels for all inputs
- Support keyboard navigation
- Use sufficient color contrast (WCAG AA minimum)
- Include ARIA labels where appropriate
- Support screen readers

**FR-5.4: Loading States**
- Show subtle loading indicator during calculation (if needed)
- Prevent UI jank during recalculation
- Ensure smooth transitions

## 7. Business Rules

### BR-1: Input Validation Rules

**BR-1.1: Monthly Investment Constraints**
- Minimum value: ₹500
- Maximum value: ₹1,00,000
- Must be a positive number
- Decimals allowed (up to 2 places)
- Cannot be zero or negative

**BR-1.2: Expected Return Rate Constraints**
- Minimum value: 1%
- Maximum value: 30%
- Must be a positive number
- Decimals allowed (up to 2 places)
- Cannot be zero or negative
- Represents annual percentage return

**BR-1.3: Time Period Constraints**
- Minimum value: 1 year
- Maximum value: 40 years
- Must be a whole number (integer)
- Cannot be zero or negative
- Represents complete years only

### BR-2: Calculation Rules

**BR-2.1: Compounding Frequency**
- Interest is compounded monthly
- Monthly rate = Annual rate / 12
- Investments are made at the beginning of each month (SIP convention)

**BR-2.2: Rounding Rules**
- All currency amounts rounded to 2 decimal places
- Use standard rounding (0.5 rounds up)
- Display rounded values, but use precise values in calculations

**BR-2.3: Default Values**
- Monthly Investment: ₹10,000
- Expected Return Rate: 12% p.a.
- Time Period: 10 years
- Calculator loads with these defaults and shows calculated results

### BR-3: Display Rules

**BR-3.1: Currency Formatting**
- Always display Indian Rupee symbol (₹)
- Use Indian numbering system (lakhs, crores) or international with commas
- Format: ₹10,00,000 or ₹10,000,000
- No currency conversion required

**BR-3.2: Percentage Display**
- Always display percentage symbol (%)
- Show up to 2 decimal places if needed
- Format: 12%, 12.5%, 12.75%

**BR-3.3: Chart Data Granularity**
- For periods ≤ 10 years: display yearly data points
- For periods > 10 years: display data points every 2-3 years or yearly (based on visual clarity)
- Always show first and last data points

### BR-4: User Interaction Rules

**BR-4.1: Input Synchronization**
- Slider and text input must always show the same value
- Changing one immediately updates the other
- Text input can accept typed values outside slider range (but within validation limits)

**BR-4.2: Recalculation Trigger**
- Any change to any input parameter triggers recalculation
- Debounce period: 300ms from last input change
- Visual feedback indicates calculation is updating

**BR-4.3: Reset Behavior**
- Reset button restores all inputs to default values
- Results and chart automatically recalculate with defaults
- No confirmation required for reset action

## 8. Non-Functional Requirements

### NFR-1: Performance Requirements

**NFR-1.1: Response Time**
- Initial page load: < 2 seconds on 3G connection
- Calculation completion: < 100ms after input stabilization
- Chart rendering: < 500ms for up to 40 data points
- Input response (typing, sliding): < 50ms (immediate feedback)

**NFR-1.2: Resource Usage**
- Application bundle size: < 500KB (minified and gzipped)
- Memory footprint: < 50MB in browser
- No memory leaks during extended usage
- Efficient chart rendering without performance degradation

**NFR-1.3: Optimization**
- Implement debouncing for input changes (300ms)
- Lazy load chart library if large
- Use efficient calculation algorithms
- Minimize DOM manipulations during updates

### NFR-2: Security Requirements

**NFR-2.1: Input Sanitization**
- Sanitize all user inputs to prevent XSS attacks
- Validate data types on client side
- Reject malformed input gracefully

**NFR-2.2: HTTPS**
- Serve application over HTTPS only
- Implement HSTS headers
- Use secure cookies if any analytics are tracked

**NFR-2.3: Privacy**
- No personal data collection required
- No user authentication or storage
- Analytics (if implemented) must be privacy-focused
- No third-party data sharing

**NFR-2.4: Content Security Policy**
- Implement strict CSP headers
- Whitelist only necessary external resources
- Prevent inline script execution

### NFR-3: Scalability Requirements

**NFR-3.1: Stateless Design**
- Application is completely stateless
- No server-side calculation or storage
- All processing happens client-side
- Infinitely horizontally scalable (static hosting)

**NFR-3.2: CDN Distribution**
- Host static assets on CDN
- Enable global edge caching
- Support high concurrent user load
- No backend bottlenecks

**NFR-3.3: Browser Support**
- Support last 2 versions of major browsers:
  - Chrome, Firefox, Safari, Edge
- Graceful degradation for older browsers
- Mobile browser support: iOS Safari, Chrome Mobile

### NFR-4: Reliability Requirements

**NFR-4.1: Availability**
- Target uptime: 99.9%
- No single point of failure (static hosting)
- Automated deployment and rollback capability

**NFR-4.2: Error Handling**
- Graceful handling of invalid inputs
- Clear error messages for users
- No application crashes or unhandled exceptions
- Fallback UI if chart library fails to load

**NFR-4.3: Data Integrity**
- Calculation accuracy to 2 decimal places
- Consistent results for same inputs
- No calculation drift over multiple recalculations

### NFR-5: Usability Requirements

**NFR-5.1: User Experience**
- Intuitive interface requiring no instructions
- Immediate visual feedback for all actions
- Smooth animations and transitions (< 300ms)
- Clear visual hierarchy and information architecture

**NFR-5.2: Accessibility (WCAG 2.1 Level AA)**
- Keyboard navigable
- Screen reader compatible
- Color contrast ratio ≥ 4.5:1 for normal text
- Focus indicators clearly visible
- ARIA labels for interactive elements

**NFR-5.3: Mobile Usability**
- Touch targets ≥ 44×44 pixels
- Readable text without zooming (16px minimum)
- No horizontal scrolling required
- Optimized for portrait and landscape orientations

### NFR-6: Maintainability Requirements

**NFR-6.1: Code Quality**
- Clean, modular code structure
- Comprehensive inline documentation
- Follow established coding standards (e.g., Airbnb style guide)
- Use TypeScript or JSDoc for type safety

**NFR-6.2: Testing**
- Unit tests for calculation logic (≥ 80% coverage)
- Integration tests for key workflows
- Cross-browser testing before release
- Automated regression testing

**NFR-6.3: Monitoring**
- Error tracking and logging (e.g., Sentry)
- Performance monitoring (Core Web Vitals)
- Usage analytics (privacy-focused)
- Uptime monitoring

### NFR-7: Compatibility Requirements

**NFR-7.1: Browser Compatibility**
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS 14+, Android 10+)

**NFR-7.2: Device Compatibility**
- Desktop (1920×1080 and above)
- Laptop (1366×768 and above)
- Tablet (768×1024 and variations)
- Mobile (375×667 to 428×926 and beyond)

**NFR-7.3: Network Compatibility**
- Function on 3G networks
- Offline capability after initial load (PWA optional)
- Handle network interruptions gracefully

### NFR-8: Localization Requirements (Future)

**NFR-8.1: Currency Support**
- Primary: Indian Rupee (₹)
- Future: Support for multiple currencies (USD, EUR, etc.)
- Configurable currency symbol and formatting

**NFR-8.2: Number Formatting**
- Primary: Indian numbering system
- Future: Support for international formats
- Locale-aware decimal and thousand separators

---

## Appendix: Technical Recommendations

### Recommended Tech Stack
- **Frontend Framework:** React, Vue.js, or vanilla JavaScript
- **Chart Library:** Chart.js, Recharts, or D3.js
- **Styling:** Tailwind CSS or custom CSS with CSS Grid/Flexbox
- **Build Tool:** Vite or Webpack
- **Hosting:** Vercel, Netlify, or AWS S3 + CloudFront
- **Analytics:** Plausible or Google Analytics (privacy-focused)

### Deployment Considerations
- Automated CI/CD pipeline
- Environment-specific configurations
- Asset optimization (minification, compression)
- Cache busting for static assets

---

**Document Version:** 1.0  
**Last Updated:** 2025-01-10  
**Author:** Senior Product Manager  
**Status:** Ready for Development