{
    "widgettype": "VBox",
    "options": {
        "width": "100%",
        "height": "100%",
        "padding": "20px",
        "backgroundColor": "#F9FAFB"
    },
    "subwidgets": [
        {
            "widgettype": "Text",
            "options": {
                "fontSize": "24px",
                "fontWeight": "bold",
                "color": "#1E40AF",
                "marginBottom": "20px",
                "text": "Financial Management"
            }
        },
        {
            "widgettype": "ResponsableBox",
            "options": {
                "gap": "16px",
                "minWidth": "250px"
            },
            "subwidgets": [
                {
                    "widgettype": "VBox",
                    "options": {
                        "backgroundColor": "#FFFFFF",
                        "borderRadius": "8px",
                        "padding": "20px",
                        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
                        "cursor": "pointer"
                    },
                    "binds": [
                        {
                            "wid": "self",
                            "event": "click",
                            "actiontype": "urlwidget",
                            "target": "app.financial_content",
                            "options": {
                                "url": "{{entire_url('receivables.ui')}}"
                            },
                            "mode": "replace"
                        }
                    ],
                    "subwidgets": [
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "18px",
                                "fontWeight": "bold",
                                "color": "#1E40AF",
                                "text": "Receivables"
                            }
                        },
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "14px",
                                "color": "#6B7280",
                                "marginTop": "8px",
                                "text": "Manage accounts receivable"
                            }
                        }
                    ]
                },
                {
                    "widgettype": "VBox",
                    "options": {
                        "backgroundColor": "#FFFFFF",
                        "borderRadius": "8px",
                        "padding": "20px",
                        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
                        "cursor": "pointer"
                    },
                    "binds": [
                        {
                            "wid": "self",
                            "event": "click",
                            "actiontype": "urlwidget",
                            "target": "app.financial_content",
                            "options": {
                                "url": "{{entire_url('receipts.ui')}}"
                            },
                            "mode": "replace"
                        }
                    ],
                    "subwidgets": [
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "18px",
                                "fontWeight": "bold",
                                "color": "#059669",
                                "text": "Receipts"
                            }
                        },
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "14px",
                                "color": "#6B7280",
                                "marginTop": "8px",
                                "text": "Manage incoming payments"
                            }
                        }
                    ]
                },
                {
                    "widgettype": "VBox",
                    "options": {
                        "backgroundColor": "#FFFFFF",
                        "borderRadius": "8px",
                        "padding": "20px",
                        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
                        "cursor": "pointer"
                    },
                    "binds": [
                        {
                            "wid": "self",
                            "event": "click",
                            "actiontype": "urlwidget",
                            "target": "app.financial_content",
                            "options": {
                                "url": "{{entire_url('payments.ui')}}"
                            },
                            "mode": "replace"
                        }
                    ],
                    "subwidgets": [
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "18px",
                                "fontWeight": "bold",
                                "color": "#D97706",
                                "text": "Payments"
                            }
                        },
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "14px",
                                "color": "#6B7280",
                                "marginTop": "8px",
                                "text": "Manage outgoing payments"
                            }
                        }
                    ]
                },
                {
                    "widgettype": "VBox",
                    "options": {
                        "backgroundColor": "#FFFFFF",
                        "borderRadius": "8px",
                        "padding": "20px",
                        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
                        "cursor": "pointer"
                    },
                    "binds": [
                        {
                            "wid": "self",
                            "event": "click",
                            "actiontype": "urlwidget",
                            "target": "app.financial_content",
                            "options": {
                                "url": "{{entire_url('financial_vouchers.ui')}}"
                            },
                            "mode": "replace"
                        }
                    ],
                    "subwidgets": [
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "18px",
                                "fontWeight": "bold",
                                "color": "#7C3AED",
                                "text": "Vouchers"
                            }
                        },
                        {
                            "widgettype": "Text",
                            "options": {
                                "fontSize": "14px",
                                "color": "#6B7280",
                                "marginTop": "8px",
                                "text": "Financial vouchers"
                            }
                        }
                    ]
                }
            ]
        },
        {
            "widgettype": "VBox",
            "id": "financial_content",
            "options": {
                "width": "100%",
                "flex": "1",
                "marginTop": "20px",
                "backgroundColor": "#FFFFFF",
                "borderRadius": "8px",
                "padding": "20px",
                "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
            }
        }
    ]
}