{
  "page_ir": {
    "page_id": "loan_calculator",
    "page_goal": "Single-page loan calculator that computes monthly payments, total interest, total amount paid, and generates a full amortization schedule with visual breakdowns and export options",
    "style": {
      "tone": "professional",
      "theme": "light",
      "density": "comfortable",
      "color_intent": "financial-utility"
    },
    "accessibility": {
      "required_labels": [
        "loan_amount_input",
        "interest_rate_input",
        "loan_term_input",
        "term_unit_select",
        "calculate_button",
        "reset_button",
        "amortization_table"
      ],
      "skip_navigation": true,
      "focus_management": true,
      "announce_changes": []
    },
    "responsive": {
      "breakpoints": {
        "mobile": 375,
        "tablet": 768,
        "desktop": 1024
      },
      "collapse_rules": [
        "stack_vertically_on_mobile",
        "hide_chart_on_small"
      ],
      "hidden_on_small": [
        "pie_chart_card"
      ],
      "stack_on_small": []
    },
    "constraints": [
      "touch_targets_44px",
      "wcag_aa_contrast",
      "keyboard_navigable"
    ],
    "seo_title": null,
    "seo_description": null
  },
  "data_ir": {
    "types": {},
    "state": {
      "loanAmount": {
        "type": "number",
        "initial": 10000,
        "required": true,
        "constraints": {
          "min": 100,
          "max": 100000000
        },
        "item_type": null
      },
      "interestRate": {
        "type": "number",
        "initial": 5.0,
        "required": true,
        "constraints": {
          "min": 0.01,
          "max": 99.99
        },
        "item_type": null
      },
      "loanTermValue": {
        "type": "number",
        "initial": 360,
        "required": true,
        "constraints": {
          "min": 1,
          "max": 480
        },
        "item_type": null
      },
      "termUnit": {
        "type": "enum",
        "initial": "months",
        "required": true,
        "constraints": {
          "values": [
            "months",
            "years"
          ]
        },
        "item_type": null
      },
      "isCalculating": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "amortizationSchedule": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "monthlyPayment": {
        "type": "number",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "totalInterest": {
        "type": "number",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "totalAmountPaid": {
        "type": "number",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "hasResults": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "currentPage": {
        "type": "number",
        "initial": 1,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "validationErrors": {
        "type": "object",
        "initial": {},
        "required": false,
        "constraints": {},
        "item_type": null
      }
    },
    "derived": {
      "loanTermMonths": {
        "type": "number",
        "expr": "state.termUnit === 'years' ? state.loanTermValue * 12 : state.loanTermValue",
        "deps": []
      },
      "totalPayments": {
        "type": "number",
        "expr": "state.amortizationSchedule.length",
        "deps": []
      },
      "interestPercentageOfPrincipal": {
        "type": "number",
        "expr": "state.totalInterest && state.loanAmount ? ((state.totalInterest / state.loanAmount) * 100).toFixed(2) : 0",
        "deps": []
      },
      "averageMonthlyInterest": {
        "type": "number",
        "expr": "state.totalInterest && derived.loanTermMonths ? (state.totalInterest / derived.loanTermMonths).toFixed(2) : 0",
        "deps": []
      },
      "averageMonthlyPrincipal": {
        "type": "number",
        "expr": "state.loanAmount && derived.loanTermMonths ? (state.loanAmount / derived.loanTermMonths).toFixed(2) : 0",
        "deps": []
      },
      "projectedPayoffDate": {
        "type": "string",
        "expr": "new Date(Date.now() + derived.loanTermMonths * 30.44 * 24 * 60 * 60 * 1000).toLocaleDateString('en-US')",
        "deps": []
      },
      "isInputValid": {
        "type": "boolean",
        "expr": "state.loanAmount >= 100 && state.loanAmount <= 100000000 && state.interestRate >= 0.01 && state.interestRate <= 99.99 && state.loanTermValue >= 1 && ((state.termUnit === 'months' && state.loanTermValue <= 480) || (state.termUnit === 'years' && state.loanTermValue <= 40))",
        "deps": []
      }
    }
  },
  "data_fetch_ir": {
    "endpoints": {
      "6b1127026c2349ddbae205c8b3d58a9a": {
        "endpoint_id": "6b1127026c2349ddbae205c8b3d58a9a",
        "module": "Calculation Management",
        "endpoint": "/calculation-management/calculation-settings/default/current",
        "method": "GET",
        "path_params": {},
        "query_params": {},
        "body": null,
        "fields": [
          "default_loan_amount",
          "default_interest_rate",
          "default_loan_term",
          "currency_symbol",
          "decimal_precision",
          "date_format"
        ],
        "response_target": "calculationSettings",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "c865730df7a045569a83dbbee8ba0db7": {
        "endpoint_id": "c865730df7a045569a83dbbee8ba0db7",
        "module": "Calculation Management",
        "endpoint": "/calculation-management/loan-calculations/calculate",
        "method": "POST",
        "path_params": {},
        "query_params": {
          "principal_amount": "$state.loanAmount",
          "annual_interest_rate": "$state.interestRate",
          "loan_term_months": "$derived.loanTermMonths"
        },
        "body": null,
        "fields": [
          "id",
          "calculation_id",
          "principal_amount",
          "annual_interest_rate",
          "loan_term_months",
          "monthly_payment",
          "total_interest",
          "total_amount_paid",
          "calculation_timestamp",
          "amortization_entries"
        ],
        "response_target": "calculationResult",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      }
    }
  },
  "data_model_ir": {
    "entities": {
      "loanCalculation": {
        "name": "LoanCalculation",
        "backend_module": "Calculation Management",
        "fields": [
          "calculation_id",
          "settings_id",
          "principal_amount",
          "annual_interest_rate",
          "loan_term_months",
          "monthly_payment",
          "total_interest",
          "total_amount_paid",
          "calculation_timestamp",
          "id",
          "created_at",
          "updated_at"
        ],
        "computed": [
          "monthly_payment",
          "total_interest",
          "total_amount_paid"
        ],
        "display_fields": [
          "principal_amount",
          "annual_interest_rate",
          "loan_term_months",
          "monthly_payment",
          "total_interest",
          "total_amount_paid"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "amortizationEntry": {
        "name": "AmortizationEntry",
        "backend_module": "Calculation Management",
        "fields": [
          "entry_id",
          "calculation_id",
          "payment_number",
          "payment_date",
          "payment_amount",
          "principal_portion",
          "interest_portion",
          "remaining_balance",
          "id",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "payment_number",
          "payment_date",
          "payment_amount",
          "principal_portion",
          "interest_portion",
          "remaining_balance"
        ],
        "search_fields": [],
        "filters": [
          "calculation_id"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "calculationSettings": {
        "name": "CalculationSettings",
        "backend_module": "Calculation Management",
        "fields": [
          "settings_id",
          "default_loan_amount",
          "default_interest_rate",
          "default_loan_term",
          "currency_symbol",
          "decimal_precision",
          "date_format",
          "id",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "default_loan_amount",
          "default_interest_rate",
          "default_loan_term",
          "currency_symbol"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      }
    },
    "relationships": []
  },
  "behaviour_ir": {
    "events": {
      "onLoanAmountChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.loanAmount",
            "expr": "event.value"
          }
        ],
        "description": ""
      },
      "onInterestRateChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.interestRate",
            "expr": "event.value"
          }
        ],
        "description": ""
      },
      "onLoanTermChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.loanTermValue",
            "expr": "event.value"
          }
        ],
        "description": ""
      },
      "onTermUnitChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.termUnit",
            "expr": "event.value"
          }
        ],
        "description": ""
      },
      "onPageChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.currentPage",
            "expr": "event.value"
          }
        ],
        "description": ""
      }
    },
    "actions": {
      "c865730df7a045569a83dbbee8ba0db7": {
        "action_id": "c865730df7a045569a83dbbee8ba0db7",
        "trigger": "button_click",
        "target_component_id": "calculate_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [
          {
            "rule_id": "val_0",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"config\": {\"value\": 100}, \"field\": \"loanAmount\", \"message\": \"Loan amount must be at least $100\", \"rule_id\": \"val_amount\", \"type\": \"min\"}",
            "message": "{\"config\": {\"value\": 100}, \"field\": \"loanAmount\", \"message\": \"Loan amount must be at least $100\", \"rule_id\": \"val_amount\", \"type\": \"min\"}"
          },
          {
            "rule_id": "val_1",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"config\": {\"value\": 100000000}, \"field\": \"loanAmount\", \"message\": \"Loan amount cannot exceed $100,000,000\", \"rule_id\": \"val_amount_max\", \"type\": \"max\"}",
            "message": "{\"config\": {\"value\": 100000000}, \"field\": \"loanAmount\", \"message\": \"Loan amount cannot exceed $100,000,000\", \"rule_id\": \"val_amount_max\", \"type\": \"max\"}"
          },
          {
            "rule_id": "val_2",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"config\": {\"value\": 0.01}, \"field\": \"interestRate\", \"message\": \"Interest rate must be at least 0.01%\", \"rule_id\": \"val_rate\", \"type\": \"min\"}",
            "message": "{\"config\": {\"value\": 0.01}, \"field\": \"interestRate\", \"message\": \"Interest rate must be at least 0.01%\", \"rule_id\": \"val_rate\", \"type\": \"min\"}"
          },
          {
            "rule_id": "val_3",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"config\": {\"value\": 99.99}, \"field\": \"interestRate\", \"message\": \"Interest rate cannot exceed 99.99%\", \"rule_id\": \"val_rate_max\", \"type\": \"max\"}",
            "message": "{\"config\": {\"value\": 99.99}, \"field\": \"interestRate\", \"message\": \"Interest rate cannot exceed 99.99%\", \"rule_id\": \"val_rate_max\", \"type\": \"max\"}"
          },
          {
            "rule_id": "val_4",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"config\": {\"value\": 1}, \"field\": \"loanTermValue\", \"message\": \"Loan term must be at least 1\", \"rule_id\": \"val_term\", \"type\": \"min\"}",
            "message": "{\"config\": {\"value\": 1}, \"field\": \"loanTermValue\", \"message\": \"Loan term must be at least 1\", \"rule_id\": \"val_term\", \"type\": \"min\"}"
          }
        ],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.isCalculating",
            "expr": "true"
          }
        ],
        "api_endpoint": "c865730df7a045569a83dbbee8ba0db7",
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Calculation complete!",
              "type": "success"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "0f25d130603849c081049a71310ccf13": {
        "action_id": "0f25d130603849c081049a71310ccf13",
        "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.loanAmount",
            "expr": "appContext.calculationSettings.defaultLoanAmount"
          },
          {
            "target": "state.interestRate",
            "expr": "appContext.calculationSettings.defaultInterestRate"
          },
          {
            "target": "state.loanTermValue",
            "expr": "appContext.calculationSettings.defaultLoanTerm"
          },
          {
            "target": "state.termUnit",
            "expr": "'months'"
          },
          {
            "target": "state.hasResults",
            "expr": "false"
          },
          {
            "target": "state.monthlyPayment",
            "expr": "null"
          },
          {
            "target": "state.totalInterest",
            "expr": "null"
          },
          {
            "target": "state.totalAmountPaid",
            "expr": "null"
          },
          {
            "target": "state.amortizationSchedule",
            "expr": "[]"
          },
          {
            "target": "state.currentPage",
            "expr": "1"
          },
          {
            "target": "state.validationErrors",
            "expr": "{}"
          }
        ],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Calculator reset to defaults",
              "type": "info"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "f2a815a17fac40dea711ee2221c308fe": {
        "action_id": "f2a815a17fac40dea711ee2221c308fe",
        "trigger": "button_click",
        "target_component_id": "print_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "custom",
            "config": {
              "handler": "window.print()"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "d21b42afecc94dcf809999cd705ab452": {
        "action_id": "d21b42afecc94dcf809999cd705ab452",
        "trigger": "button_click",
        "target_component_id": "copy_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "clipboard",
            "config": {
              "content": "state.monthlyPayment + ',' + state.totalInterest + ',' + state.totalAmountPaid"
            }
          },
          {
            "type": "toast",
            "config": {
              "message": "Results copied to clipboard!",
              "type": "success"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "26788c10dbb4471087b396e3e363f0a0": {
        "action_id": "26788c10dbb4471087b396e3e363f0a0",
        "trigger": "button_click",
        "target_component_id": "download_pdf_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "download",
            "config": {
              "format": "pdf",
              "filename": "loan_calculation.pdf"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      }
    },
    "feedback": {
      "c865730df7a045569a83dbbee8ba0db7": {
        "action_id": "c865730df7a045569a83dbbee8ba0db7",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Loan calculation complete!",
        "error_message": "Failed to calculate loan. Please check your inputs.",
        "ui_updates": [
          "state.isCalculating = false",
          "state.hasResults = true"
        ]
      },
      "0f25d130603849c081049a71310ccf13": {
        "action_id": "0f25d130603849c081049a71310ccf13",
        "loading_indicator": null,
        "loading_text": null,
        "success_message": "Calculator reset successfully",
        "error_message": null,
        "ui_updates": []
      },
      "f2a815a17fac40dea711ee2221c308fe": {
        "action_id": "f2a815a17fac40dea711ee2221c308fe",
        "loading_indicator": null,
        "loading_text": null,
        "success_message": null,
        "error_message": null,
        "ui_updates": []
      },
      "d21b42afecc94dcf809999cd705ab452": {
        "action_id": "d21b42afecc94dcf809999cd705ab452",
        "loading_indicator": null,
        "loading_text": null,
        "success_message": "Copied to clipboard!",
        "error_message": "Failed to copy to clipboard",
        "ui_updates": []
      },
      "26788c10dbb4471087b396e3e363f0a0": {
        "action_id": "26788c10dbb4471087b396e3e363f0a0",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "PDF downloaded successfully",
        "error_message": "Failed to generate PDF",
        "ui_updates": []
      }
    }
  },
  "component_ir": {
    "library": "antd",
    "theme": {
      "primaryColor": "#1677ff",
      "secondaryColor": "#000000",
      "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": {},
        "dynamic_props": {},
        "styles": {
          "minHeight": "100vh",
          "width": "100%",
          "padding": "24px",
          "backgroundColor": "#f5f5f5"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "page_header": {
        "type": "Typography.Title",
        "label": "Loan Calculator",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 2
        },
        "dynamic_props": {},
        "styles": {
          "textAlign": "center",
          "marginBottom": "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
      },
      "page_subtitle": {
        "type": "Typography.Text",
        "label": "Calculate your monthly payments, total interest, and view a complete amortization schedule",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "textAlign": "center",
          "display": "block",
          "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
      },
      "input_section": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Loan Parameters"
        },
        "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
      },
      "input_form_container": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "flexDirection": "column",
          "gap": "20px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "loan_amount_field": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "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
      },
      "loan_amount_label": {
        "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",
          "marginBottom": "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
      },
      "loan_amount_label_text": {
        "type": "Typography.Text",
        "label": "Loan Amount",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true
        },
        "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
      },
      "loan_amount_tooltip": {
        "type": "Tooltip",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Enter the total amount you wish to borrow. Must be between $100 and $100,000,000."
        },
        "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
      },
      "loan_amount_info_icon": {
        "type": "InfoCircleOutlined",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "color": "#8c8c8c"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "loan_amount_input": {
        "type": "InputNumber",
        "label": "Loan Amount",
        "description": null,
        "bind": "state.loanAmount",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "min": 100,
          "max": 100000000,
          "prefix": "$",
          "placeholder": "10,000",
          "formatter": "value => `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')",
          "parser": "value => value.replace(/\\$\\s?|(,*)/g, '')",
          "size": "large",
          "style": {
            "width": "100%"
          },
          "aria-label": "Loan Amount"
        },
        "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
      },
      "interest_rate_field": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "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
      },
      "interest_rate_label": {
        "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",
          "marginBottom": "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
      },
      "interest_rate_label_text": {
        "type": "Typography.Text",
        "label": "Annual Interest Rate",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true
        },
        "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
      },
      "interest_rate_tooltip": {
        "type": "Tooltip",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Enter the annual interest rate as a percentage. Must be between 0.01% and 99.99%."
        },
        "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
      },
      "interest_rate_info_icon": {
        "type": "InfoCircleOutlined",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "color": "#8c8c8c"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "interest_rate_input": {
        "type": "InputNumber",
        "label": "Annual Interest Rate",
        "description": null,
        "bind": "state.interestRate",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "min": 0.01,
          "max": 99.99,
          "step": 0.01,
          "suffix": "%",
          "placeholder": "5.0",
          "size": "large",
          "style": {
            "width": "100%"
          },
          "aria-label": "Annual Interest Rate"
        },
        "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
      },
      "loan_term_field": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "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
      },
      "loan_term_label": {
        "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",
          "marginBottom": "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
      },
      "loan_term_label_text": {
        "type": "Typography.Text",
        "label": "Loan Term",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true
        },
        "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
      },
      "loan_term_tooltip": {
        "type": "Tooltip",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Enter the loan duration. Toggle between months and years. Maximum 480 months (40 years)."
        },
        "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
      },
      "loan_term_info_icon": {
        "type": "InfoCircleOutlined",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "color": "#8c8c8c"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "loan_term_input_group": {
        "type": "Space.Compact",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "style": {
            "width": "100%"
          }
        },
        "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
      },
      "loan_term_input": {
        "type": "InputNumber",
        "label": "Loan Term",
        "description": null,
        "bind": "state.loanTermValue",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "min": 1,
          "max": 480,
          "placeholder": "360",
          "size": "large",
          "style": {
            "width": "70%"
          },
          "aria-label": "Loan Term Value"
        },
        "dynamic_props": {},
        "styles": {
          "width": "70%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "term_unit_select": {
        "type": "Select",
        "label": "Term Unit",
        "description": null,
        "bind": "state.termUnit",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "options": [
            {
              "label": "Months",
              "value": "months"
            },
            {
              "label": "Years",
              "value": "years"
            }
          ],
          "size": "large",
          "style": {
            "width": "30%"
          },
          "aria-label": "Term Unit"
        },
        "dynamic_props": {},
        "styles": {
          "width": "30%"
        },
        "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_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",
          "gap": "12px",
          "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
      },
      "calculate_button": {
        "type": "Button",
        "label": "Calculate",
        "description": null,
        "bind": null,
        "onClick": "calculateLoan",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "size": "large",
          "icon": "CalculatorOutlined",
          "disabled": "!derived.isInputValid",
          "loading": "state.isCalculating",
          "aria-label": "Calculate Loan"
        },
        "dynamic_props": {},
        "styles": {
          "flex": 1,
          "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
      },
      "reset_button": {
        "type": "Button",
        "label": "Reset",
        "description": null,
        "bind": null,
        "onClick": "resetCalculator",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "size": "large",
          "icon": "ReloadOutlined",
          "aria-label": "Reset Calculator"
        },
        "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_section": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "visible": "state.hasResults"
        },
        "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
      },
      "results_title": {
        "type": "Typography.Title",
        "label": "Calculation Results",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 3
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "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
      },
      "summary_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": {
          "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
      },
      "monthly_payment_col": {
        "type": "Col",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "xs": 24,
          "sm": 8
        },
        "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_payment_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "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
      },
      "monthly_payment_label": {
        "type": "Typography.Text",
        "label": "Monthly Payment",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "display": "block",
          "marginBottom": "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_payment_value": {
        "type": "Statistic",
        "label": null,
        "description": null,
        "bind": "state.monthlyPayment",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#1677ff",
            "fontSize": "28px",
            "fontWeight": "bold"
          }
        },
        "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_interest_col": {
        "type": "Col",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "xs": 24,
          "sm": 8
        },
        "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_interest_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "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
      },
      "total_interest_label": {
        "type": "Typography.Text",
        "label": "Total Interest Paid",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "display": "block",
          "marginBottom": "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_interest_value": {
        "type": "Statistic",
        "label": null,
        "description": null,
        "bind": "state.totalInterest",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#faad14",
            "fontSize": "28px",
            "fontWeight": "bold"
          }
        },
        "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_amount_col": {
        "type": "Col",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "xs": 24,
          "sm": 8
        },
        "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_amount_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "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
      },
      "total_amount_label": {
        "type": "Typography.Text",
        "label": "Total Amount Paid",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "display": "block",
          "marginBottom": "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_amount_value": {
        "type": "Statistic",
        "label": null,
        "description": null,
        "bind": "state.totalAmountPaid",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "fontSize": "28px",
            "fontWeight": "bold"
          }
        },
        "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
      },
      "pie_chart_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Principal vs Interest Breakdown"
        },
        "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
      },
      "pie_chart": {
        "type": "PieChart",
        "label": "Principal vs Interest",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "data": [
            {
              "name": "Principal",
              "value": "state.loanAmount",
              "color": "#1677ff"
            },
            {
              "name": "Interest",
              "value": "state.totalInterest",
              "color": "#faad14"
            }
          ],
          "height": 300
        },
        "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
      },
      "statistics_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Summary Statistics"
        },
        "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
      },
      "statistics_content": {
        "type": "Descriptions",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true,
          "column": {
            "xs": 1,
            "sm": 2,
            "md": 3
          },
          "items": [
            {
              "label": "Total Payments",
              "value": "derived.totalPayments"
            },
            {
              "label": "Interest % of Principal",
              "value": "derived.interestPercentageOfPrincipal + '%'"
            },
            {
              "label": "Avg Monthly Interest",
              "value": "'$' + derived.averageMonthlyInterest"
            },
            {
              "label": "Avg Monthly Principal",
              "value": "'$' + derived.averageMonthlyPrincipal"
            },
            {
              "label": "Projected Payoff Date",
              "value": "derived.projectedPayoffDate"
            }
          ]
        },
        "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
      },
      "amortization_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Amortization Schedule"
        },
        "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
      },
      "amortization_table": {
        "type": "Table",
        "label": "Amortization Schedule",
        "description": null,
        "bind": "state.amortizationSchedule",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "columns": [
            {
              "title": "Payment #",
              "dataIndex": "payment_number",
              "key": "payment_number",
              "width": 90,
              "fixed": "left"
            },
            {
              "title": "Payment Date",
              "dataIndex": "payment_date",
              "key": "payment_date",
              "width": 120
            },
            {
              "title": "Payment Amount",
              "dataIndex": "payment_amount",
              "key": "payment_amount",
              "width": 140
            },
            {
              "title": "Principal",
              "dataIndex": "principal_portion",
              "key": "principal_portion",
              "width": 130
            },
            {
              "title": "Interest",
              "dataIndex": "interest_portion",
              "key": "interest_portion",
              "width": 130
            },
            {
              "title": "Remaining Balance",
              "dataIndex": "remaining_balance",
              "key": "remaining_balance",
              "width": 160
            }
          ],
          "pagination": {
            "pageSize": 12,
            "showSizeChanger": true,
            "showTotal": true,
            "current": "state.currentPage"
          },
          "scroll": {
            "x": 770
          },
          "size": "small",
          "rowClassName": "(record, index) => index === 0 ? 'first-payment-row' : (index === state.amortizationSchedule.length - 1 ? 'last-payment-row' : '')",
          "aria-label": "Amortization Schedule Table"
        },
        "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
      },
      "export_section": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Export & Share"
        },
        "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
      },
      "export_buttons_container": {
        "type": "Space",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "wrap": true
        },
        "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
      },
      "print_button": {
        "type": "Button",
        "label": "Print",
        "description": null,
        "bind": null,
        "onClick": "printResults",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "icon": "PrinterOutlined",
          "size": "large",
          "aria-label": "Print Results"
        },
        "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
      },
      "copy_button": {
        "type": "Button",
        "label": "Copy Results",
        "description": null,
        "bind": null,
        "onClick": "copyResults",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "icon": "CopyOutlined",
          "size": "large",
          "aria-label": "Copy Results to Clipboard"
        },
        "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
      },
      "download_pdf_button": {
        "type": "Button",
        "label": "Download PDF",
        "description": null,
        "bind": null,
        "onClick": "downloadPdf",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "icon": "FilePdfOutlined",
          "size": "large",
          "aria-label": "Download PDF"
        },
        "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
      }
    }
  },
  "layout_ir": {
    "root": "main_container",
    "children": {
      "main_container": [
        "page_header",
        "page_subtitle",
        "input_section",
        "results_section"
      ],
      "input_section": [
        "input_form_container"
      ],
      "input_form_container": [
        "loan_amount_field",
        "interest_rate_field",
        "loan_term_field",
        "button_group"
      ],
      "loan_amount_field": [
        "loan_amount_label",
        "loan_amount_input"
      ],
      "loan_amount_label": [
        "loan_amount_label_text",
        "loan_amount_tooltip"
      ],
      "loan_amount_tooltip": [
        "loan_amount_info_icon"
      ],
      "interest_rate_field": [
        "interest_rate_label",
        "interest_rate_input"
      ],
      "interest_rate_label": [
        "interest_rate_label_text",
        "interest_rate_tooltip"
      ],
      "interest_rate_tooltip": [
        "interest_rate_info_icon"
      ],
      "loan_term_field": [
        "loan_term_label",
        "loan_term_input_group"
      ],
      "loan_term_label": [
        "loan_term_label_text",
        "loan_term_tooltip"
      ],
      "loan_term_tooltip": [
        "loan_term_info_icon"
      ],
      "loan_term_input_group": [
        "loan_term_input",
        "term_unit_select"
      ],
      "button_group": [
        "calculate_button",
        "reset_button"
      ],
      "results_section": [
        "results_title",
        "summary_cards_row",
        "pie_chart_card",
        "statistics_card",
        "amortization_card",
        "export_section"
      ],
      "summary_cards_row": [
        "monthly_payment_col",
        "total_interest_col",
        "total_amount_col"
      ],
      "monthly_payment_col": [
        "monthly_payment_card"
      ],
      "monthly_payment_card": [
        "monthly_payment_label",
        "monthly_payment_value"
      ],
      "total_interest_col": [
        "total_interest_card"
      ],
      "total_interest_card": [
        "total_interest_label",
        "total_interest_value"
      ],
      "total_amount_col": [
        "total_amount_card"
      ],
      "total_amount_card": [
        "total_amount_label",
        "total_amount_value"
      ],
      "pie_chart_card": [
        "pie_chart"
      ],
      "statistics_card": [
        "statistics_content"
      ],
      "amortization_card": [
        "amortization_table"
      ],
      "export_section": [
        "export_buttons_container"
      ],
      "export_buttons_container": [
        "print_button",
        "copy_button",
        "download_pdf_button"
      ]
    },
    "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
      },
      "input_form_container": {
        "type": "vertical",
        "gap": 20,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "loan_amount_field": {
        "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
      },
      "loan_amount_label": {
        "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
      },
      "interest_rate_field": {
        "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
      },
      "interest_rate_label": {
        "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
      },
      "loan_term_field": {
        "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
      },
      "loan_term_label": {
        "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
      },
      "loan_term_input_group": {
        "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_group": {
        "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_section": {
        "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
      },
      "summary_cards_row": {
        "type": "grid",
        "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
      },
      "export_buttons_container": {
        "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
      }
    },
    "layout_zones": [
      {
        "zone_id": "main_zone",
        "component": "main_container",
        "anchor": "center",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Root container for the entire loan calculator page"
      },
      {
        "zone_id": "input_zone",
        "component": "input_section",
        "anchor": "center",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Input section with loan parameters"
      },
      {
        "zone_id": "results_zone",
        "component": "results_section",
        "anchor": "center",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Results section shown after calculation"
      }
    ],
    "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
}