{
  "page_ir": {
    "page_id": "fines_management",
    "page_goal": "Manage library fines and payments - view outstanding fines, record payments, waive fines, create new fines, and view payment history",
    "style": {
      "tone": "professional",
      "theme": "light",
      "density": "comfortable",
      "color_intent": "neutral with status colors for payment states"
    },
    "accessibility": {
      "required_labels": [
        "fine_table",
        "payment_table",
        "record_payment_form",
        "waive_fine_form",
        "create_fine_form"
      ],
      "skip_navigation": true,
      "focus_management": true,
      "announce_changes": []
    },
    "responsive": {
      "breakpoints": {
        "sm": 576,
        "md": 768,
        "lg": 1024,
        "xl": 1200
      },
      "collapse_rules": [
        "summary_cards_stack_on_small",
        "table_scroll_horizontal_on_small"
      ],
      "hidden_on_small": [
        "transaction_reference_column"
      ],
      "stack_on_small": []
    },
    "constraints": [
      "role_librarian_or_admin_only"
    ],
    "seo_title": null,
    "seo_description": null
  },
  "data_ir": {
    "types": {},
    "state": {
      "fines": {
        "type": "array",
        "initial": [],
        "required": true,
        "constraints": {},
        "item_type": null
      },
      "payments": {
        "type": "array",
        "initial": [],
        "required": true,
        "constraints": {},
        "item_type": null
      },
      "activeTab": {
        "type": "string",
        "initial": "outstanding",
        "required": true,
        "constraints": {},
        "item_type": null
      },
      "filterPaymentStatus": {
        "type": "string",
        "initial": "UNPAID",
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "selectedFineId": {
        "type": "string",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "recordPaymentModalVisible": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "waiveFineModalVisible": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "createFineModalVisible": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "loading": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "members": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "loans": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {},
        "item_type": null
      }
    },
    "derived": {
      "outstandingFines": {
        "type": "array",
        "expr": "state.fines.filter(f => f.payment_status === 'UNPAID' || f.payment_status === 'PARTIALLY_PAID')",
        "deps": []
      },
      "totalOutstanding": {
        "type": "number",
        "expr": "state.fines.filter(f => f.payment_status === 'UNPAID' || f.payment_status === 'PARTIALLY_PAID').reduce((sum, f) => sum + (Number(f.amount) - Number(f.amount_paid || 0)), 0)",
        "deps": []
      },
      "collectedToday": {
        "type": "number",
        "expr": "state.payments.filter(p => new Date(p.transaction_date).toDateString() === new Date().toDateString()).reduce((sum, p) => sum + Number(p.amount), 0)",
        "deps": []
      },
      "collectedThisMonth": {
        "type": "number",
        "expr": "state.payments.filter(p => { const d = new Date(p.transaction_date); const now = new Date(); return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear(); }).reduce((sum, p) => sum + Number(p.amount), 0)",
        "deps": []
      }
    }
  },
  "data_fetch_ir": {
    "endpoints": {
      "5a18fb9c4aa048008c4359916bce6e9c": {
        "endpoint_id": "5a18fb9c4aa048008c4359916bce6e9c",
        "module": "Fines and Payments",
        "endpoint": "/fines/",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100
        },
        "body": null,
        "fields": [
          "id",
          "member_id",
          "loan_id",
          "amount",
          "reason",
          "issue_date",
          "payment_status",
          "payment_date",
          "amount_paid",
          "waived_by_librarian_id",
          "waived_reason",
          "created_at",
          "updated_at"
        ],
        "response_target": "fines",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "a65d0392ce4f437ea14d0e8e5d526dad": {
        "endpoint_id": "a65d0392ce4f437ea14d0e8e5d526dad",
        "module": "Fines and Payments",
        "endpoint": "/fines/",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100,
          "payment_status": "UNPAID"
        },
        "body": null,
        "fields": [
          "id",
          "member_id",
          "loan_id",
          "amount",
          "reason",
          "issue_date",
          "payment_status",
          "amount_paid"
        ],
        "response_target": "fines",
        "response_transform": null,
        "trigger": "on_change",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "bfe74b2ab8ad4054ba9d3f9c8dbc9de3": {
        "endpoint_id": "bfe74b2ab8ad4054ba9d3f9c8dbc9de3",
        "module": "Fines and Payments",
        "endpoint": "/fines/payments",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100
        },
        "body": null,
        "fields": [
          "id",
          "member_id",
          "fine_id",
          "amount",
          "payment_method",
          "transaction_date",
          "reference_number",
          "processed_by_librarian_id",
          "notes",
          "created_at"
        ],
        "response_target": "payments",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "b1dfc53b7db742d8bfa8a8bd86d1df27": {
        "endpoint_id": "b1dfc53b7db742d8bfa8a8bd86d1df27",
        "module": "Authentication",
        "endpoint": "/auth/members",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100
        },
        "body": null,
        "fields": [
          "id",
          "membership_number",
          "user"
        ],
        "response_target": "members",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "b884765b30ab4e5f8fb43c9447ea678e": {
        "endpoint_id": "b884765b30ab4e5f8fb43c9447ea678e",
        "module": "Circulation",
        "endpoint": "/loans/",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100
        },
        "body": null,
        "fields": [
          "id",
          "member_id",
          "book_copy_id",
          "checkout_date",
          "due_date",
          "status"
        ],
        "response_target": "loans",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "f75053d335f8464ea8fa3d0f8ecfa0d1": {
        "endpoint_id": "f75053d335f8464ea8fa3d0f8ecfa0d1",
        "module": "Fines and Payments",
        "endpoint": "/fines/",
        "method": "POST",
        "path_params": {},
        "query_params": {},
        "body": null,
        "fields": [
          "id",
          "member_id",
          "loan_id",
          "amount",
          "reason",
          "issue_date",
          "payment_status"
        ],
        "response_target": "createFine_data",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "4e27439d8b864819a7f86d81193687e6": {
        "endpoint_id": "4e27439d8b864819a7f86d81193687e6",
        "module": "Fines and Payments",
        "endpoint": "/fines/payments",
        "method": "POST",
        "path_params": {},
        "query_params": {},
        "body": null,
        "fields": [
          "id",
          "member_id",
          "fine_id",
          "amount",
          "payment_method",
          "transaction_date",
          "reference_number",
          "processed_by_librarian_id",
          "notes"
        ],
        "response_target": "createPayment_data",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "ac69357f7aaa4d68a8236c8875001595": {
        "endpoint_id": "ac69357f7aaa4d68a8236c8875001595",
        "module": "Fines and Payments",
        "endpoint": "/fines/{fine_id}/waive",
        "method": "POST",
        "path_params": {
          "fine_id": "$state.selectedFineId"
        },
        "query_params": {
          "librarian_id": "$appContext.currentUser.id",
          "reason": "$form.waived_reason"
        },
        "body": null,
        "fields": [
          "id",
          "payment_status",
          "waived_by_librarian_id",
          "waived_reason"
        ],
        "response_target": "waiveFine_data",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      }
    }
  },
  "data_model_ir": {
    "entities": {
      "fine": {
        "name": "Fine",
        "backend_module": "Fines and Payments",
        "fields": [
          "id",
          "member_id",
          "loan_id",
          "amount",
          "reason",
          "issue_date",
          "payment_status",
          "payment_date",
          "amount_paid",
          "waived_by_librarian_id",
          "waived_reason",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "id",
          "member_id",
          "reason",
          "amount",
          "issue_date",
          "loan_id",
          "payment_status"
        ],
        "search_fields": [],
        "filters": [
          "payment_status",
          "member_id"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "payment": {
        "name": "Payment",
        "backend_module": "Fines and Payments",
        "fields": [
          "id",
          "member_id",
          "fine_id",
          "amount",
          "payment_method",
          "transaction_date",
          "reference_number",
          "processed_by_librarian_id",
          "notes",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "id",
          "member_id",
          "amount",
          "payment_method",
          "transaction_date",
          "reference_number",
          "fine_id"
        ],
        "search_fields": [],
        "filters": [
          "member_id",
          "fine_id"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "member": {
        "name": "Member",
        "backend_module": "Authentication",
        "fields": [
          "id",
          "membership_number",
          "user"
        ],
        "computed": [],
        "display_fields": [
          "id",
          "membership_number"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "loan": {
        "name": "Loan",
        "backend_module": "Circulation",
        "fields": [
          "id",
          "member_id",
          "book_copy_id",
          "checkout_date",
          "due_date",
          "status"
        ],
        "computed": [],
        "display_fields": [
          "id",
          "member_id",
          "book_copy_id"
        ],
        "search_fields": [],
        "filters": [
          "member_id",
          "status"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      }
    },
    "relationships": []
  },
  "behaviour_ir": {
    "events": {
      "onTabChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.activeTab",
            "expr": "event.value"
          }
        ],
        "description": ""
      },
      "openRecordPaymentModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.selectedFineId",
            "expr": "event.fineId"
          },
          {
            "target": "state.recordPaymentModalVisible",
            "expr": "true"
          }
        ],
        "description": ""
      },
      "closeRecordPaymentModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.recordPaymentModalVisible",
            "expr": "false"
          },
          {
            "target": "state.selectedFineId",
            "expr": "null"
          }
        ],
        "description": ""
      },
      "openWaiveFineModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.selectedFineId",
            "expr": "event.fineId"
          },
          {
            "target": "state.waiveFineModalVisible",
            "expr": "true"
          }
        ],
        "description": ""
      },
      "closeWaiveFineModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.waiveFineModalVisible",
            "expr": "false"
          },
          {
            "target": "state.selectedFineId",
            "expr": "null"
          }
        ],
        "description": ""
      },
      "openCreateFineModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.createFineModalVisible",
            "expr": "true"
          }
        ],
        "description": ""
      },
      "closeCreateFineModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.createFineModalVisible",
            "expr": "false"
          }
        ],
        "description": ""
      }
    },
    "actions": {
      "88d8f3af72084be085ef6433ad4f7819": {
        "action_id": "88d8f3af72084be085ef6433ad4f7819",
        "trigger": "form_submit",
        "target_component_id": "record_payment_modal",
        "operation": "create",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [
          {
            "rule_id": "val_0",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"amount\", \"message\": \"Amount is required\", \"rule_id\": \"val_amount\", \"type\": \"required\"}",
            "message": "{\"field\": \"amount\", \"message\": \"Amount is required\", \"rule_id\": \"val_amount\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_1",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"amount\", \"message\": \"Amount must be greater than 0\", \"rule_id\": \"val_amount_min\", \"type\": \"min\", \"value\": 0.01}",
            "message": "{\"field\": \"amount\", \"message\": \"Amount must be greater than 0\", \"rule_id\": \"val_amount_min\", \"type\": \"min\", \"value\": 0.01}"
          },
          {
            "rule_id": "val_2",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"payment_method\", \"message\": \"Payment method is required\", \"rule_id\": \"val_payment_method\", \"type\": \"required\"}",
            "message": "{\"field\": \"payment_method\", \"message\": \"Payment method is required\", \"rule_id\": \"val_payment_method\", \"type\": \"required\"}"
          }
        ],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.recordPaymentModalVisible",
            "expr": "false"
          },
          {
            "target": "state.selectedFineId",
            "expr": "null"
          }
        ],
        "api_endpoint": "4e27439d8b864819a7f86d81193687e6",
        "api_body": "{ member_id: state.fines.find(f => f.id === state.selectedFineId)?.member_id, fine_id: state.selectedFineId, amount: form.amount, payment_method: form.payment_method, transaction_date: new Date().toISOString(), reference_number: form.reference_number, processed_by_librarian_id: appContext.currentUser.id, notes: form.notes }",
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Payment recorded successfully",
              "type": "success"
            }
          },
          {
            "type": "refresh",
            "config": {
              "targets": [
                "fetchFines",
                "fetchPayments"
              ]
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "955d920ac8a84187bfea8d1183133277": {
        "action_id": "955d920ac8a84187bfea8d1183133277",
        "trigger": "form_submit",
        "target_component_id": "waive_fine_modal",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": true,
        "confirmation_message": null,
        "validation_rules": [
          {
            "rule_id": "val_0",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"waived_reason\", \"message\": \"Reason for waiving is required\", \"rule_id\": \"val_waive_reason\", \"type\": \"required\"}",
            "message": "{\"field\": \"waived_reason\", \"message\": \"Reason for waiving is required\", \"rule_id\": \"val_waive_reason\", \"type\": \"required\"}"
          }
        ],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.waiveFineModalVisible",
            "expr": "false"
          },
          {
            "target": "state.selectedFineId",
            "expr": "null"
          }
        ],
        "api_endpoint": "ac69357f7aaa4d68a8236c8875001595",
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Fine waived successfully",
              "type": "success"
            }
          },
          {
            "type": "refresh",
            "config": {
              "targets": [
                "fetchFines"
              ]
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "3b926ccb72234d00b755144506fb2ebc": {
        "action_id": "3b926ccb72234d00b755144506fb2ebc",
        "trigger": "form_submit",
        "target_component_id": "create_fine_modal",
        "operation": "create",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [
          {
            "rule_id": "val_0",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"member_id\", \"message\": \"Member is required\", \"rule_id\": \"val_member\", \"type\": \"required\"}",
            "message": "{\"field\": \"member_id\", \"message\": \"Member is required\", \"rule_id\": \"val_member\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_1",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"amount\", \"message\": \"Amount is required\", \"rule_id\": \"val_fine_amount\", \"type\": \"required\"}",
            "message": "{\"field\": \"amount\", \"message\": \"Amount is required\", \"rule_id\": \"val_fine_amount\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_2",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"amount\", \"message\": \"Amount must be greater than 0\", \"rule_id\": \"val_fine_amount_min\", \"type\": \"min\", \"value\": 0.01}",
            "message": "{\"field\": \"amount\", \"message\": \"Amount must be greater than 0\", \"rule_id\": \"val_fine_amount_min\", \"type\": \"min\", \"value\": 0.01}"
          },
          {
            "rule_id": "val_3",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"reason\", \"message\": \"Reason is required\", \"rule_id\": \"val_reason\", \"type\": \"required\"}",
            "message": "{\"field\": \"reason\", \"message\": \"Reason is required\", \"rule_id\": \"val_reason\", \"type\": \"required\"}"
          }
        ],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.createFineModalVisible",
            "expr": "false"
          }
        ],
        "api_endpoint": "f75053d335f8464ea8fa3d0f8ecfa0d1",
        "api_body": "{ member_id: form.member_id, loan_id: form.loan_id || null, amount: form.amount, reason: form.reason, issue_date: new Date().toISOString().split('T')[0], payment_status: 'UNPAID', amount_paid: 0 }",
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Fine created successfully",
              "type": "success"
            }
          },
          {
            "type": "refresh",
            "config": {
              "targets": [
                "fetchFines"
              ]
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "8e30f83bd9fa426680a0757897400041": {
        "action_id": "8e30f83bd9fa426680a0757897400041",
        "trigger": "button_click",
        "target_component_id": "back_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": "navigate",
            "config": {
              "path": "/staff/dashboard"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      }
    },
    "feedback": {
      "88d8f3af72084be085ef6433ad4f7819": {
        "action_id": "88d8f3af72084be085ef6433ad4f7819",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Payment recorded successfully",
        "error_message": "Failed to record payment",
        "ui_updates": []
      },
      "955d920ac8a84187bfea8d1183133277": {
        "action_id": "955d920ac8a84187bfea8d1183133277",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Fine waived successfully",
        "error_message": "Failed to waive fine",
        "ui_updates": []
      },
      "3b926ccb72234d00b755144506fb2ebc": {
        "action_id": "3b926ccb72234d00b755144506fb2ebc",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Fine created successfully",
        "error_message": "Failed to create fine",
        "ui_updates": []
      },
      "8e30f83bd9fa426680a0757897400041": {
        "action_id": "8e30f83bd9fa426680a0757897400041",
        "loading_indicator": null,
        "loading_text": null,
        "success_message": null,
        "error_message": null,
        "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": "Layout",
        "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",
          "background": "#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": "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": "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
      },
      "header_left": {
        "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": "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
      },
      "back_button": {
        "type": "Button",
        "label": "Back to Dashboard",
        "description": null,
        "bind": null,
        "onClick": "navigateToDashboard",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "text",
          "icon": "ArrowLeftOutlined"
        },
        "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
      },
      "page_title": {
        "type": "Typography.Title",
        "label": "Fines & Payments",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 2
        },
        "dynamic_props": {},
        "styles": {
          "margin": 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
      },
      "create_fine_button": {
        "type": "Button",
        "label": "Create Fine",
        "description": null,
        "bind": null,
        "onClick": "openCreateFineModal",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "icon": "PlusOutlined"
        },
        "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
      },
      "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
      },
      "total_outstanding_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_outstanding_card": {
        "type": "Card",
        "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
      },
      "total_outstanding_statistic": {
        "type": "Statistic",
        "label": "Total Outstanding",
        "description": null,
        "bind": "derived.totalOutstanding",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#cf1322"
          }
        },
        "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
      },
      "collected_today_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
      },
      "collected_today_card": {
        "type": "Card",
        "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
      },
      "collected_today_statistic": {
        "type": "Statistic",
        "label": "Collected Today",
        "description": null,
        "bind": "derived.collectedToday",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#3f8600"
          }
        },
        "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
      },
      "collected_month_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
      },
      "collected_month_card": {
        "type": "Card",
        "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
      },
      "collected_month_statistic": {
        "type": "Statistic",
        "label": "Collected This Month",
        "description": null,
        "bind": "derived.collectedThisMonth",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#1677ff"
          }
        },
        "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
      },
      "tabs_container": {
        "type": "Tabs",
        "label": null,
        "description": null,
        "bind": "state.activeTab",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "items": [
            {
              "key": "outstanding",
              "label": "Outstanding Fines"
            },
            {
              "key": "payments",
              "label": "Payments"
            },
            {
              "key": "all",
              "label": "All Fines"
            }
          ]
        },
        "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
      },
      "outstanding_fines_table": {
        "type": "Table",
        "label": "Outstanding Fines",
        "description": null,
        "bind": "derived.outstandingFines",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "columns": [
            {
              "title": "Fine ID",
              "dataIndex": "id",
              "key": "id",
              "ellipsis": true,
              "width": 120
            },
            {
              "title": "Member",
              "dataIndex": "member_id",
              "key": "member_id"
            },
            {
              "title": "Type",
              "dataIndex": "reason",
              "key": "reason"
            },
            {
              "title": "Amount",
              "dataIndex": "amount",
              "key": "amount",
              "render": "currency"
            },
            {
              "title": "Issue Date",
              "dataIndex": "issue_date",
              "key": "issue_date"
            },
            {
              "title": "Related Loan",
              "dataIndex": "loan_id",
              "key": "loan_id"
            },
            {
              "title": "Status",
              "dataIndex": "payment_status",
              "key": "payment_status",
              "render": "tag"
            },
            {
              "title": "Actions",
              "key": "actions",
              "render": "actions",
              "actions": [
                "record_payment",
                "waive"
              ]
            }
          ],
          "rowKey": "id",
          "pagination": {
            "pageSize": 10
          },
          "size": "middle"
        },
        "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
      },
      "payments_table": {
        "type": "Table",
        "label": "Payments",
        "description": null,
        "bind": "state.payments",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "columns": [
            {
              "title": "Payment ID",
              "dataIndex": "id",
              "key": "id",
              "ellipsis": true,
              "width": 120
            },
            {
              "title": "Member",
              "dataIndex": "member_id",
              "key": "member_id"
            },
            {
              "title": "Amount",
              "dataIndex": "amount",
              "key": "amount",
              "render": "currency"
            },
            {
              "title": "Method",
              "dataIndex": "payment_method",
              "key": "payment_method",
              "render": "tag"
            },
            {
              "title": "Date",
              "dataIndex": "transaction_date",
              "key": "transaction_date"
            },
            {
              "title": "Transaction Reference",
              "dataIndex": "reference_number",
              "key": "reference_number"
            },
            {
              "title": "Fine Covered",
              "dataIndex": "fine_id",
              "key": "fine_id"
            }
          ],
          "rowKey": "id",
          "pagination": {
            "pageSize": 10
          },
          "size": "middle"
        },
        "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
      },
      "all_fines_table": {
        "type": "Table",
        "label": "All Fines",
        "description": null,
        "bind": "state.fines",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "columns": [
            {
              "title": "Fine ID",
              "dataIndex": "id",
              "key": "id",
              "ellipsis": true,
              "width": 120
            },
            {
              "title": "Member",
              "dataIndex": "member_id",
              "key": "member_id"
            },
            {
              "title": "Type",
              "dataIndex": "reason",
              "key": "reason"
            },
            {
              "title": "Amount",
              "dataIndex": "amount",
              "key": "amount",
              "render": "currency"
            },
            {
              "title": "Amount Paid",
              "dataIndex": "amount_paid",
              "key": "amount_paid",
              "render": "currency"
            },
            {
              "title": "Issue Date",
              "dataIndex": "issue_date",
              "key": "issue_date"
            },
            {
              "title": "Status",
              "dataIndex": "payment_status",
              "key": "payment_status",
              "render": "tag"
            },
            {
              "title": "Related Loan",
              "dataIndex": "loan_id",
              "key": "loan_id"
            }
          ],
          "rowKey": "id",
          "pagination": {
            "pageSize": 10
          },
          "size": "middle"
        },
        "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
      },
      "record_payment_modal": {
        "type": "Modal",
        "label": "Record Payment",
        "description": null,
        "bind": "state.recordPaymentModalVisible",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "width": 520,
          "destroyOnClose": 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
      },
      "record_payment_form": {
        "type": "Form",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "layout": "vertical"
        },
        "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
      },
      "payment_amount_field": {
        "type": "Form.Item",
        "label": "Amount",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "amount",
          "rules": [
            {
              "required": true,
              "message": "Amount is required"
            }
          ]
        },
        "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
      },
      "payment_amount_input": {
        "type": "InputNumber",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "min": 0.01,
          "precision": 2,
          "prefix": "$",
          "style": {
            "width": "100%"
          },
          "placeholder": "Enter payment 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
      },
      "payment_method_field": {
        "type": "Form.Item",
        "label": "Payment Method",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "payment_method",
          "rules": [
            {
              "required": true,
              "message": "Payment method is required"
            }
          ]
        },
        "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
      },
      "payment_method_select": {
        "type": "Select",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Select payment method",
          "options": [
            {
              "label": "Cash",
              "value": "CASH"
            },
            {
              "label": "Credit Card",
              "value": "CREDIT_CARD"
            },
            {
              "label": "Debit Card",
              "value": "DEBIT_CARD"
            },
            {
              "label": "Online",
              "value": "ONLINE"
            },
            {
              "label": "Check",
              "value": "CHECK"
            }
          ]
        },
        "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
      },
      "payment_reference_field": {
        "type": "Form.Item",
        "label": "Reference Number",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "reference_number"
        },
        "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
      },
      "payment_reference_input": {
        "type": "Input",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Enter transaction reference number (optional)"
        },
        "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
      },
      "payment_notes_field": {
        "type": "Form.Item",
        "label": "Notes",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "notes"
        },
        "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
      },
      "payment_notes_input": {
        "type": "Input.TextArea",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "rows": 3,
          "placeholder": "Additional notes (e.g., partial payment)"
        },
        "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
      },
      "waive_fine_modal": {
        "type": "Modal",
        "label": "Waive Fine",
        "description": null,
        "bind": "state.waiveFineModalVisible",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "width": 480,
          "destroyOnClose": 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
      },
      "waive_fine_form": {
        "type": "Form",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "layout": "vertical"
        },
        "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
      },
      "waive_reason_field": {
        "type": "Form.Item",
        "label": "Reason for Waiving",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "waived_reason",
          "rules": [
            {
              "required": true,
              "message": "Reason is required"
            }
          ]
        },
        "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
      },
      "waive_reason_input": {
        "type": "Input.TextArea",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "rows": 4,
          "placeholder": "Enter reason for waiving this fine"
        },
        "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
      },
      "waive_confirmation_alert": {
        "type": "Alert",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "warning",
          "message": "This action cannot be undone. The fine will be permanently waived.",
          "showIcon": true
        },
        "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
      },
      "create_fine_modal": {
        "type": "Modal",
        "label": "Create Fine",
        "description": null,
        "bind": "state.createFineModalVisible",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "width": 560,
          "destroyOnClose": 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
      },
      "create_fine_form": {
        "type": "Form",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "layout": "vertical"
        },
        "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
      },
      "fine_member_field": {
        "type": "Form.Item",
        "label": "Member",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "member_id",
          "rules": [
            {
              "required": true,
              "message": "Member is required"
            }
          ]
        },
        "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
      },
      "fine_member_select": {
        "type": "Select",
        "label": null,
        "description": null,
        "bind": "state.members",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Select member",
          "showSearch": true,
          "optionFilterProp": "label"
        },
        "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
      },
      "fine_type_field": {
        "type": "Form.Item",
        "label": "Fine Type",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "reason",
          "rules": [
            {
              "required": true,
              "message": "Fine type is required"
            }
          ]
        },
        "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
      },
      "fine_type_select": {
        "type": "Select",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Select fine type",
          "options": [
            {
              "label": "Overdue",
              "value": "Overdue"
            },
            {
              "label": "Damage",
              "value": "Damage"
            },
            {
              "label": "Lost Book",
              "value": "Lost Book"
            },
            {
              "label": "Other",
              "value": "Other"
            }
          ]
        },
        "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
      },
      "fine_amount_field": {
        "type": "Form.Item",
        "label": "Amount",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "amount",
          "rules": [
            {
              "required": true,
              "message": "Amount is required"
            }
          ]
        },
        "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
      },
      "fine_amount_input": {
        "type": "InputNumber",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "min": 0.01,
          "precision": 2,
          "prefix": "$",
          "style": {
            "width": "100%"
          },
          "placeholder": "Enter fine 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
      },
      "fine_loan_field": {
        "type": "Form.Item",
        "label": "Related Loan (Optional)",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "loan_id"
        },
        "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
      },
      "fine_loan_select": {
        "type": "Select",
        "label": null,
        "description": null,
        "bind": "state.loans",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Select related loan (optional)",
          "allowClear": true,
          "showSearch": 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
      }
    }
  },
  "layout_ir": {
    "root": "main_container",
    "children": {
      "main_container": [
        "page_header",
        "summary_cards_row",
        "tabs_container",
        "outstanding_fines_table",
        "payments_table",
        "all_fines_table",
        "record_payment_modal",
        "waive_fine_modal",
        "create_fine_modal"
      ],
      "page_header": [
        "header_left",
        "create_fine_button"
      ],
      "header_left": [
        "back_button",
        "page_title"
      ],
      "summary_cards_row": [
        "total_outstanding_col",
        "collected_today_col",
        "collected_month_col"
      ],
      "total_outstanding_col": [
        "total_outstanding_card"
      ],
      "total_outstanding_card": [
        "total_outstanding_statistic"
      ],
      "collected_today_col": [
        "collected_today_card"
      ],
      "collected_today_card": [
        "collected_today_statistic"
      ],
      "collected_month_col": [
        "collected_month_card"
      ],
      "collected_month_card": [
        "collected_month_statistic"
      ],
      "record_payment_modal": [
        "record_payment_form"
      ],
      "record_payment_form": [
        "payment_amount_field",
        "payment_method_field",
        "payment_reference_field",
        "payment_notes_field"
      ],
      "payment_amount_field": [
        "payment_amount_input"
      ],
      "payment_method_field": [
        "payment_method_select"
      ],
      "payment_reference_field": [
        "payment_reference_input"
      ],
      "payment_notes_field": [
        "payment_notes_input"
      ],
      "waive_fine_modal": [
        "waive_fine_form"
      ],
      "waive_fine_form": [
        "waive_confirmation_alert",
        "waive_reason_field"
      ],
      "waive_reason_field": [
        "waive_reason_input"
      ],
      "create_fine_modal": [
        "create_fine_form"
      ],
      "create_fine_form": [
        "fine_member_field",
        "fine_type_field",
        "fine_amount_field",
        "fine_loan_field"
      ],
      "fine_member_field": [
        "fine_member_select"
      ],
      "fine_type_field": [
        "fine_type_select"
      ],
      "fine_amount_field": [
        "fine_amount_input"
      ],
      "fine_loan_field": [
        "fine_loan_select"
      ]
    },
    "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
      },
      "page_header": {
        "type": "horizontal",
        "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
      },
      "header_left": {
        "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
      },
      "summary_cards_row": {
        "type": "horizontal",
        "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
      },
      "record_payment_form": {
        "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
      },
      "waive_fine_form": {
        "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
      },
      "create_fine_form": {
        "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
      }
    },
    "layout_zones": [
      {
        "zone_id": "main_content",
        "component": "main_container",
        "anchor": "top-left",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Main page container with full viewport height"
      },
      {
        "zone_id": "record_payment_overlay",
        "component": "record_payment_modal",
        "anchor": "center",
        "size_hint": "auto",
        "z_layer": "overlay",
        "notes": "Modal for recording payment against a fine"
      },
      {
        "zone_id": "waive_fine_overlay",
        "component": "waive_fine_modal",
        "anchor": "center",
        "size_hint": "auto",
        "z_layer": "overlay",
        "notes": "Modal for waiving a fine with reason"
      },
      {
        "zone_id": "create_fine_overlay",
        "component": "create_fine_modal",
        "anchor": "center",
        "size_hint": "auto",
        "z_layer": "overlay",
        "notes": "Modal for creating a new fine"
      }
    ],
    "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
}