{ "page_ir": { "page_id": "sip_calculator", "page_goal": "A single-page SIP calculator that lets users input monthly investment, expected return rate, and time period to instantly see total investment, estimated returns, maturity value, and a growth chart.", "style": { "tone": "professional", "theme": "light", "density": "comfortable", "color_intent": "blue-primary with green accents for growth" }, "accessibility": { "required_labels": [ "monthly_investment_input", "expected_return_rate_input", "time_period_input", "total_investment_card", "estimated_returns_card", "maturity_value_card", "growth_chart", "reset_button" ], "skip_navigation": true, "focus_management": true, "announce_changes": [] }, "responsive": { "breakpoints": { "mobile": 576, "tablet": 768, "desktop": 1200 }, "collapse_rules": [ "result_cards_row stacks vertically on mobile", "input_section and chart_section stack vertically on mobile and tablet" ], "hidden_on_small": [], "stack_on_small": [] }, "constraints": [ "All calculations client-side using SIP formula with monthly compounding", "Debounce recalculation at 300ms", "Indian numbering system for currency formatting", "Touch targets minimum 44x44px on mobile" ], "seo_title": null, "seo_description": null }, "data_ir": { "types": {}, "state": { "monthlyInvestment": { "type": "number", "initial": 10000, "required": true, "constraints": { "min": 500, "max": 100000 }, "item_type": null }, "expectedReturnRate": { "type": "number", "initial": 12, "required": true, "constraints": { "min": 1, "max": 30 }, "item_type": null }, "timePeriod": { "type": "number", "initial": 10, "required": true, "constraints": { "min": 1, "max": 40 }, "item_type": null }, "calculationLoading": { "type": "boolean", "initial": false, "required": false, "constraints": {}, "item_type": null }, "chartDataPoints": { "type": "array", "initial": [], "required": false, "constraints": {}, "item_type": null } }, "derived": { "totalMonths": { "type": "number", "expr": "state.timePeriod * 12", "deps": [] }, "monthlyRate": { "type": "number", "expr": "state.expectedReturnRate / 12 / 100", "deps": [] }, "totalInvestment": { "type": "number", "expr": "state.monthlyInvestment * state.timePeriod * 12", "deps": [] }, "maturityValue": { "type": "number", "expr": "state.monthlyInvestment * (((Math.pow(1 + state.expectedReturnRate / 12 / 100, state.timePeriod * 12) - 1) / (state.expectedReturnRate / 12 / 100)) * (1 + state.expectedReturnRate / 12 / 100))", "deps": [] }, "estimatedReturns": { "type": "number", "expr": "derived.maturityValue - derived.totalInvestment", "deps": [] } } }, "data_fetch_ir": { "endpoints": { "72fcc3b2498d45848d05f7055b4d88f0": { "endpoint_id": "72fcc3b2498d45848d05f7055b4d88f0", "module": "SIP Calculations", "endpoint": "/calculations/", "method": "POST", "path_params": {}, "query_params": {}, "body": { "monthly_investment": "$state.monthlyInvestment", "expected_return_rate": "$state.expectedReturnRate", "time_period": "$state.timePeriod" }, "fields": [ "calculation_input", "calculation_result", "chart_data_points" ], "response_target": "chartDataPoints", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null } } }, "data_model_ir": { "entities": { "calculation": { "name": "SIP Calculation", "backend_module": "SIP Calculations", "fields": [ "id", "monthly_investment", "expected_return_rate", "time_period", "timestamp", "created_at", "updated_at" ], "computed": [], "display_fields": [ "monthly_investment", "expected_return_rate", "time_period" ], "search_fields": [], "filters": [], "default_sort": null, "default_sort_dir": "asc" }, "calculationResult": { "name": "SIP Calculation Result", "backend_module": "SIP Calculations", "fields": [ "calculation_input", "calculation_result", "chart_data_points" ], "computed": [], "display_fields": [ "calculation_result", "chart_data_points" ], "search_fields": [], "filters": [], "default_sort": null, "default_sort_dir": "asc" } }, "relationships": [] }, "behaviour_ir": { "events": { "onMonthlyInvestmentChange": { "type": "mutation", "updates": [ { "target": "state.monthlyInvestment", "expr": "Math.min(100000, Math.max(500, Number(value)))" } ], "description": "" }, "onReturnRateChange": { "type": "mutation", "updates": [ { "target": "state.expectedReturnRate", "expr": "Math.min(30, Math.max(1, Number(value)))" } ], "description": "" }, "onTimePeriodChange": { "type": "mutation", "updates": [ { "target": "state.timePeriod", "expr": "Math.min(40, Math.max(1, Math.round(Number(value))))" } ], "description": "" }, "incrementMonthlyInvestment": { "type": "mutation", "updates": [ { "target": "state.monthlyInvestment", "expr": "Math.min(100000, state.monthlyInvestment + 500)" } ], "description": "" }, "decrementMonthlyInvestment": { "type": "mutation", "updates": [ { "target": "state.monthlyInvestment", "expr": "Math.max(500, state.monthlyInvestment - 500)" } ], "description": "" }, "incrementReturnRate": { "type": "mutation", "updates": [ { "target": "state.expectedReturnRate", "expr": "Math.min(30, state.expectedReturnRate + 0.5)" } ], "description": "" }, "decrementReturnRate": { "type": "mutation", "updates": [ { "target": "state.expectedReturnRate", "expr": "Math.max(1, state.expectedReturnRate - 0.5)" } ], "description": "" }, "incrementTimePeriod": { "type": "mutation", "updates": [ { "target": "state.timePeriod", "expr": "Math.min(40, state.timePeriod + 1)" } ], "description": "" }, "decrementTimePeriod": { "type": "mutation", "updates": [ { "target": "state.timePeriod", "expr": "Math.max(1, state.timePeriod - 1)" } ], "description": "" } }, "actions": { "b58681ddaf5b47e4819c755f8a29b22f": { "action_id": "b58681ddaf5b47e4819c755f8a29b22f", "trigger": "button_click", "target_component_id": "reset_button", "operation": "custom", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.monthlyInvestment", "expr": "10000" }, { "target": "state.expectedReturnRate", "expr": "12" }, { "target": "state.timePeriod", "expr": "10" } ], "api_endpoint": null, "api_body": null, "side_effects": [ { "type": "toast", "config": { "message": "All inputs reset to defaults", "type": "info" } } ], "then": null, "catch": null, "data_action": null }, "eda3547fd0964100b0fe8b39fec458cc": { "action_id": "eda3547fd0964100b0fe8b39fec458cc", "trigger": "button_click", "target_component_id": "save_button", "operation": "create", "description": "", "payload": { "monthly_investment": "$state.monthlyInvestment", "expected_return_rate": "$state.expectedReturnRate", "time_period": "$state.timePeriod" }, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [ { "rule_id": "val_0", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"monthlyInvestment\", \"message\": \"Monthly investment must be at least \\u20b9500\", \"rule_id\": \"val_monthly\", \"type\": \"min\", \"value\": 500}", "message": "{\"field\": \"monthlyInvestment\", \"message\": \"Monthly investment must be at least \\u20b9500\", \"rule_id\": \"val_monthly\", \"type\": \"min\", \"value\": 500}" }, { "rule_id": "val_1", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"monthlyInvestment\", \"message\": \"Monthly investment cannot exceed \\u20b91,00,000\", \"rule_id\": \"val_monthly_max\", \"type\": \"max\", \"value\": 100000}", "message": "{\"field\": \"monthlyInvestment\", \"message\": \"Monthly investment cannot exceed \\u20b91,00,000\", \"rule_id\": \"val_monthly_max\", \"type\": \"max\", \"value\": 100000}" }, { "rule_id": "val_2", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"expectedReturnRate\", \"message\": \"Return rate must be at least 1%\", \"rule_id\": \"val_rate\", \"type\": \"min\", \"value\": 1}", "message": "{\"field\": \"expectedReturnRate\", \"message\": \"Return rate must be at least 1%\", \"rule_id\": \"val_rate\", \"type\": \"min\", \"value\": 1}" }, { "rule_id": "val_3", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"expectedReturnRate\", \"message\": \"Return rate cannot exceed 30%\", \"rule_id\": \"val_rate_max\", \"type\": \"max\", \"value\": 30}", "message": "{\"field\": \"expectedReturnRate\", \"message\": \"Return rate cannot exceed 30%\", \"rule_id\": \"val_rate_max\", \"type\": \"max\", \"value\": 30}" }, { "rule_id": "val_4", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"timePeriod\", \"message\": \"Time period must be at least 1 year\", \"rule_id\": \"val_period\", \"type\": \"min\", \"value\": 1}", "message": "{\"field\": \"timePeriod\", \"message\": \"Time period must be at least 1 year\", \"rule_id\": \"val_period\", \"type\": \"min\", \"value\": 1}" }, { "rule_id": "val_5", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"timePeriod\", \"message\": \"Time period cannot exceed 40 years\", \"rule_id\": \"val_period_max\", \"type\": \"max\", \"value\": 40}", "message": "{\"field\": \"timePeriod\", \"message\": \"Time period cannot exceed 40 years\", \"rule_id\": \"val_period_max\", \"type\": \"max\", \"value\": 40}" } ], "validation_messages": {}, "updates": [ { "target": "state.calculationLoading", "expr": "true" } ], "api_endpoint": "72fcc3b2498d45848d05f7055b4d88f0", "api_body": "{ monthly_investment: state.monthlyInvestment, expected_return_rate: state.expectedReturnRate, time_period: state.timePeriod }", "side_effects": [ { "type": "toast", "config": { "message": "Calculation saved successfully!", "type": "success" } } ], "then": null, "catch": null, "data_action": null } }, "feedback": { "b58681ddaf5b47e4819c755f8a29b22f": { "action_id": "b58681ddaf5b47e4819c755f8a29b22f", "loading_indicator": "none", "loading_text": null, "success_message": "Inputs reset to defaults", "error_message": "", "ui_updates": [] }, "eda3547fd0964100b0fe8b39fec458cc": { "action_id": "eda3547fd0964100b0fe8b39fec458cc", "loading_indicator": "spinner", "loading_text": null, "success_message": "Calculation saved!", "error_message": "Failed to save calculation", "ui_updates": [ "state.calculationLoading = false" ] } } }, "component_ir": { "library": "antd", "theme": { "primaryColor": "#1677ff", "secondaryColor": "#52c41a", "successColor": null, "warningColor": null, "errorColor": null, "fontFamily": "sans-serif", "fontSize": null, "borderRadius": 6 }, "components": { "main_container": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "aria-label": "SIP Calculator Application" }, "dynamic_props": {}, "styles": { "minHeight": "100vh", "width": "100%", "background": "#f5f5f5", "padding": "0" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "header_section": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "background": "linear-gradient(135deg, #1677ff 0%, #0958d9 100%)", "padding": "32px 24px", "textAlign": "center" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "header_title": { "type": "Typography.Title", "label": "SIP Calculator", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "level": 1, "aria-label": "SIP Calculator" }, "dynamic_props": {}, "styles": { "color": "#ffffff", "margin": "0", "fontSize": "32px", "fontWeight": "700" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "header_subtitle": { "type": "Typography.Text", "label": "Plan your Systematic Investment and watch your wealth grow", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "color": "rgba(255,255,255,0.85)", "fontSize": "16px", "display": "block", "marginTop": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "content_container": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "maxWidth": "1200px", "margin": "0 auto", "padding": "24px", "width": "100%" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "input_results_row": { "type": "Row", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "gutter": [ 24, 24 ] }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "input_col": { "type": "Col", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "xs": 24, "lg": 12 }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "input_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Investment Parameters", "aria-label": "Investment input parameters section" }, "dynamic_props": {}, "styles": { "borderRadius": "8px", "boxShadow": "0 2px 8px rgba(0,0,0,0.06)", "height": "100%" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_section": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "marginBottom": "28px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_label_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "alignItems": "center", "marginBottom": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_label": { "type": "Typography.Text", "label": "Monthly Investment", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "strong": true }, "dynamic_props": {}, "styles": { "fontSize": "14px", "color": "#434343" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_input_group": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "gap": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_decrement": { "type": "Button", "label": "−", "description": null, "bind": null, "onClick": "decrementMonthlyInvestment", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "shape": "circle", "size": "middle", "aria-label": "Decrease monthly investment by ₹500" }, "dynamic_props": {}, "styles": { "minWidth": "36px", "minHeight": "36px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_input": { "type": "InputNumber", "label": null, "description": null, "bind": "state.monthlyInvestment", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "min": 500, "max": 100000, "step": 500, "prefix": "₹", "formatter": "value => `${value}`.replace(/\\B(?=(\\d{2})+(?=\\d{3})(?!\\d))/g, ',')", "parser": "value => value.replace(/₹\\s?|(,*)/g, '')", "aria-label": "Monthly investment amount in rupees", "controls": false }, "dynamic_props": {}, "styles": { "width": "160px", "textAlign": "right" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_increment": { "type": "Button", "label": "+", "description": null, "bind": null, "onClick": "incrementMonthlyInvestment", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "shape": "circle", "size": "middle", "aria-label": "Increase monthly investment by ₹500" }, "dynamic_props": {}, "styles": { "minWidth": "36px", "minHeight": "36px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_slider": { "type": "Slider", "label": null, "description": null, "bind": "state.monthlyInvestment", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "min": 500, "max": 100000, "step": 500, "aria-label": "Monthly investment slider" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_range_labels": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "marginTop": "-4px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_min_label": { "type": "Typography.Text", "label": "₹500", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "monthly_investment_max_label": { "type": "Typography.Text", "label": "₹1,00,000", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_section": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "marginBottom": "28px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_label_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "alignItems": "center", "marginBottom": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_label": { "type": "Typography.Text", "label": "Expected Return Rate (p.a.)", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "strong": true }, "dynamic_props": {}, "styles": { "fontSize": "14px", "color": "#434343" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_input_group": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "gap": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_decrement": { "type": "Button", "label": "−", "description": null, "bind": null, "onClick": "decrementReturnRate", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "shape": "circle", "size": "middle", "aria-label": "Decrease return rate by 0.5%" }, "dynamic_props": {}, "styles": { "minWidth": "36px", "minHeight": "36px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_input": { "type": "InputNumber", "label": null, "description": null, "bind": "state.expectedReturnRate", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "min": 1, "max": 30, "step": 0.5, "suffix": "%", "precision": 2, "aria-label": "Expected annual return rate percentage", "controls": false }, "dynamic_props": {}, "styles": { "width": "120px", "textAlign": "right" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_increment": { "type": "Button", "label": "+", "description": null, "bind": null, "onClick": "incrementReturnRate", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "shape": "circle", "size": "middle", "aria-label": "Increase return rate by 0.5%" }, "dynamic_props": {}, "styles": { "minWidth": "36px", "minHeight": "36px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_slider": { "type": "Slider", "label": null, "description": null, "bind": "state.expectedReturnRate", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "min": 1, "max": 30, "step": 0.5, "aria-label": "Return rate slider" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_range_labels": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "marginTop": "-4px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_min_label": { "type": "Typography.Text", "label": "1%", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "return_rate_max_label": { "type": "Typography.Text", "label": "30%", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_section": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "marginBottom": "24px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_label_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "alignItems": "center", "marginBottom": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_label": { "type": "Typography.Text", "label": "Time Period", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "strong": true }, "dynamic_props": {}, "styles": { "fontSize": "14px", "color": "#434343" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_input_group": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "alignItems": "center", "gap": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_decrement": { "type": "Button", "label": "−", "description": null, "bind": null, "onClick": "decrementTimePeriod", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "shape": "circle", "size": "middle", "aria-label": "Decrease time period by 1 year" }, "dynamic_props": {}, "styles": { "minWidth": "36px", "minHeight": "36px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_input": { "type": "InputNumber", "label": null, "description": null, "bind": "state.timePeriod", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "min": 1, "max": 40, "step": 1, "suffix": "Yrs", "precision": 0, "aria-label": "Investment time period in years", "controls": false }, "dynamic_props": {}, "styles": { "width": "120px", "textAlign": "right" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_increment": { "type": "Button", "label": "+", "description": null, "bind": null, "onClick": "incrementTimePeriod", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "shape": "circle", "size": "middle", "aria-label": "Increase time period by 1 year" }, "dynamic_props": {}, "styles": { "minWidth": "36px", "minHeight": "36px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_slider": { "type": "Slider", "label": null, "description": null, "bind": "state.timePeriod", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "min": 1, "max": 40, "step": 1, "aria-label": "Time period slider" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_range_labels": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "justifyContent": "space-between", "marginTop": "-4px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_min_label": { "type": "Typography.Text", "label": "1 Yr", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "time_period_max_label": { "type": "Typography.Text", "label": "40 Yrs", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "button_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "gap": "12px", "justifyContent": "flex-end", "marginTop": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "reset_button": { "type": "Button", "label": "Reset to Defaults", "description": null, "bind": null, "onClick": "resetDefaults", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "icon": "ReloadOutlined", "aria-label": "Reset all inputs to default values" }, "dynamic_props": {}, "styles": { "minHeight": "44px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "save_button": { "type": "Button", "label": "Save Calculation", "description": null, "bind": null, "onClick": "saveCalculation", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "primary", "icon": "SaveOutlined", "loading": "state.calculationLoading", "aria-label": "Save this calculation to server" }, "dynamic_props": {}, "styles": { "minHeight": "44px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "results_col": { "type": "Col", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "xs": 24, "lg": 12 }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "results_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Investment Summary", "aria-label": "Calculation results section" }, "dynamic_props": {}, "styles": { "borderRadius": "8px", "boxShadow": "0 2px 8px rgba(0,0,0,0.06)", "height": "100%" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "result_cards_row": { "type": "Row", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "gutter": [ 16, 16 ] }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "total_investment_col": { "type": "Col", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "xs": 24, "sm": 24 }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "total_investment_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "size": "small", "aria-label": "Total investment amount" }, "dynamic_props": {}, "styles": { "background": "#f0f5ff", "border": "1px solid #d6e4ff", "borderRadius": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "total_investment_label_text": { "type": "Typography.Text", "label": "Total Investment", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "13px", "display": "block", "marginBottom": "4px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "total_investment_value": { "type": "Statistic", "label": null, "description": null, "bind": "derived.totalInvestment", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "prefix": "₹", "precision": 0, "groupSeparator": ",", "valueStyle": { "fontSize": "24px", "fontWeight": "600", "color": "#1677ff" }, "aria-label": "Total amount you will invest" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "estimated_returns_col": { "type": "Col", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "xs": 24, "sm": 24 }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "estimated_returns_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "size": "small", "aria-label": "Estimated returns amount" }, "dynamic_props": {}, "styles": { "background": "#f6ffed", "border": "1px solid #d9f7be", "borderRadius": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "estimated_returns_label_text": { "type": "Typography.Text", "label": "Estimated Returns", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "13px", "display": "block", "marginBottom": "4px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "estimated_returns_value": { "type": "Statistic", "label": null, "description": null, "bind": "derived.estimatedReturns", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "prefix": "₹", "precision": 0, "groupSeparator": ",", "valueStyle": { "fontSize": "24px", "fontWeight": "600", "color": "#52c41a" }, "aria-label": "Estimated wealth gained" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "maturity_value_col": { "type": "Col", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "xs": 24, "sm": 24 }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "maturity_value_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "size": "small", "aria-label": "Total maturity value" }, "dynamic_props": {}, "styles": { "background": "linear-gradient(135deg, #1677ff 0%, #0958d9 100%)", "border": "none", "borderRadius": "8px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "maturity_value_label_text": { "type": "Typography.Text", "label": "Maturity Value", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "fontSize": "13px", "display": "block", "marginBottom": "4px", "color": "rgba(255,255,255,0.85)" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "maturity_value_amount": { "type": "Statistic", "label": null, "description": null, "bind": "derived.maturityValue", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "prefix": "₹", "precision": 0, "groupSeparator": ",", "valueStyle": { "fontSize": "32px", "fontWeight": "700", "color": "#ffffff" }, "aria-label": "Total maturity value of your SIP investment" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "breakdown_divider": { "type": "Divider", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "dashed": true }, "dynamic_props": {}, "styles": { "margin": "16px 0" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "breakdown_title": { "type": "Typography.Text", "label": "Investment Breakdown", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "strong": true, "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "13px", "display": "block", "marginBottom": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "breakdown_progress_invested": { "type": "Progress", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "percent_expr": "Math.round((derived.totalInvestment / derived.maturityValue) * 100)", "strokeColor": "#1677ff", "trailColor": "#52c41a", "showInfo": true, "format_expr": "'Invested: ' + Math.round((derived.totalInvestment / derived.maturityValue) * 100) + '%'", "aria-label": "Percentage of maturity that is invested amount" }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "chart_section_row": { "type": "Row", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "gutter": [ 24, 24 ] }, "dynamic_props": {}, "styles": { "marginTop": "24px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "chart_col": { "type": "Col", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "xs": 24 }, "dynamic_props": {}, "styles": {}, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "chart_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Investment Growth Over Time", "aria-label": "Chart showing investment growth projection over time" }, "dynamic_props": {}, "styles": { "borderRadius": "8px", "boxShadow": "0 2px 8px rgba(0,0,0,0.06)" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "growth_chart": { "type": "AreaChart", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "height": 400, "data_expr": "Array.from({length: state.timePeriod}, (_, i) => { const year = i + 1; const months = year * 12; const r = state.expectedReturnRate / 12 / 100; const invested = state.monthlyInvestment * months; const projected = state.monthlyInvestment * (((Math.pow(1 + r, months) - 1) / r) * (1 + r)); return { year: 'Year ' + year, investedAmount: Math.round(invested), projectedValue: Math.round(projected), gains: Math.round(projected - invested) }; })", "xField": "year", "series": [ { "dataKey": "investedAmount", "name": "Total Invested", "color": "#1677ff", "fill": "rgba(22, 119, 255, 0.15)" }, { "dataKey": "projectedValue", "name": "Projected Value", "color": "#52c41a", "fill": "rgba(82, 196, 26, 0.15)" } ], "tooltip": { "enabled": true, "formatter": "indian_currency" }, "xAxisLabel": "Years", "yAxisLabel": "Amount (₹)", "animate": true, "responsive": true, "aria-label": "Area chart showing cumulative invested amount and projected portfolio value over time" }, "dynamic_props": {}, "styles": { "width": "100%" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "footer_section": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "textAlign": "center", "padding": "24px", "marginTop": "16px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "footer_disclaimer": { "type": "Typography.Text", "label": "Disclaimer: This calculator provides estimates based on projected returns. Actual returns may vary. Mutual fund investments are subject to market risks.", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "formula_text": { "type": "Typography.Text", "label": "Formula: M = P × ({[1 + i]ⁿ – 1} / i) × (1 + i) where P = Monthly Investment, i = Monthly Rate, n = Total Months", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "type": "secondary" }, "dynamic_props": {}, "styles": { "fontSize": "11px", "display": "block", "marginTop": "4px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null } } }, "layout_ir": { "root": "main_container", "children": { "main_container": [ "header_section", "content_container", "footer_section" ], "header_section": [ "header_title", "header_subtitle" ], "content_container": [ "input_results_row", "chart_section_row" ], "input_results_row": [ "input_col", "results_col" ], "input_col": [ "input_card" ], "input_card": [ "monthly_investment_section", "return_rate_section", "time_period_section", "button_row" ], "monthly_investment_section": [ "monthly_investment_label_row", "monthly_investment_slider", "monthly_investment_range_labels" ], "monthly_investment_label_row": [ "monthly_investment_label", "monthly_investment_input_group" ], "monthly_investment_input_group": [ "monthly_investment_decrement", "monthly_investment_input", "monthly_investment_increment" ], "monthly_investment_range_labels": [ "monthly_investment_min_label", "monthly_investment_max_label" ], "return_rate_section": [ "return_rate_label_row", "return_rate_slider", "return_rate_range_labels" ], "return_rate_label_row": [ "return_rate_label", "return_rate_input_group" ], "return_rate_input_group": [ "return_rate_decrement", "return_rate_input", "return_rate_increment" ], "return_rate_range_labels": [ "return_rate_min_label", "return_rate_max_label" ], "time_period_section": [ "time_period_label_row", "time_period_slider", "time_period_range_labels" ], "time_period_label_row": [ "time_period_label", "time_period_input_group" ], "time_period_input_group": [ "time_period_decrement", "time_period_input", "time_period_increment" ], "time_period_range_labels": [ "time_period_min_label", "time_period_max_label" ], "button_row": [ "reset_button", "save_button" ], "results_col": [ "results_card" ], "results_card": [ "result_cards_row", "breakdown_divider", "breakdown_title", "breakdown_progress_invested" ], "result_cards_row": [ "total_investment_col", "estimated_returns_col", "maturity_value_col" ], "total_investment_col": [ "total_investment_card" ], "total_investment_card": [ "total_investment_label_text", "total_investment_value" ], "estimated_returns_col": [ "estimated_returns_card" ], "estimated_returns_card": [ "estimated_returns_label_text", "estimated_returns_value" ], "maturity_value_col": [ "maturity_value_card" ], "maturity_value_card": [ "maturity_value_label_text", "maturity_value_amount" ], "chart_section_row": [ "chart_col" ], "chart_col": [ "chart_card" ], "chart_card": [ "growth_chart" ], "footer_section": [ "footer_disclaimer", "formula_text" ] }, "layout": { "main_container": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "header_section": { "type": "vertical", "gap": 4, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "content_container": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "input_results_row": { "type": "horizontal", "gap": 24, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "input_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "monthly_investment_section": { "type": "vertical", "gap": 4, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "monthly_investment_label_row": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "monthly_investment_input_group": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "monthly_investment_range_labels": { "type": "horizontal", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "return_rate_section": { "type": "vertical", "gap": 4, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "return_rate_label_row": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "return_rate_input_group": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "return_rate_range_labels": { "type": "horizontal", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "time_period_section": { "type": "vertical", "gap": 4, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "time_period_label_row": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "time_period_input_group": { "type": "horizontal", "gap": 8, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "time_period_range_labels": { "type": "horizontal", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "button_row": { "type": "horizontal", "gap": 12, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "results_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "result_cards_row": { "type": "vertical", "gap": 16, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "total_investment_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "estimated_returns_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "maturity_value_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "chart_section_row": { "type": "horizontal", "gap": 24, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "chart_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "footer_section": { "type": "vertical", "gap": 4, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null } }, "layout_zones": [ { "zone_id": "header_zone", "component": "header_section", "anchor": "top-left", "size_hint": "full-width", "z_layer": "base", "notes": "Full-width gradient header" }, { "zone_id": "content_zone", "component": "content_container", "anchor": "center", "size_hint": "full-width", "z_layer": "base", "notes": "Main content area with max-width constraint" }, { "zone_id": "chart_zone", "component": "chart_card", "anchor": "center", "size_hint": "full-width", "z_layer": "base", "notes": "Full-width chart section" } ], "responsive_overrides": [] }, "navigation_ir": { "tabs": [], "modals": {}, "drawers": {}, "routes": [], "breadcrumb": null, "default_tab": null }, "realtime_ir": { "timers": {}, "polling": {} }, "metadata": { "ir_version": "3.5", "generated_at": "", "source_prompt": null, "schema_session_id": null, "warnings": [] }, "page_data_contract": null, "schema_ir": null }