{ "page_ir": { "page_id": "member_management", "page_goal": "Allow librarians to search, filter, view, edit, and manage library members including approving pending memberships, suspending/activating accounts, and viewing detailed member profiles with loan/reservation/fine history.", "style": { "tone": "professional", "theme": "light", "density": "comfortable", "color_intent": "neutral with status-colored badges" }, "accessibility": { "required_labels": [ "search_input", "status_filter", "branch_filter", "members_table", "member_detail_drawer", "edit_member_modal" ], "skip_navigation": true, "focus_management": true, "announce_changes": [] }, "responsive": { "breakpoints": { "sm": 576, "md": 768, "lg": 1024, "xl": 1200 }, "collapse_rules": [ "table scrolls horizontally on small screens", "filters stack vertically on mobile" ], "hidden_on_small": [ "outstanding_fines_column" ], "stack_on_small": [] }, "constraints": [ "Only librarian and administrator roles can access this page", "Approve action only visible for members with ACTIVE status pending review" ], "seo_title": null, "seo_description": null }, "data_ir": { "types": {}, "state": { "members": { "type": "array", "initial": [], "required": true, "constraints": {}, "item_type": null }, "membersLoading": { "type": "boolean", "initial": false, "required": false, "constraints": {}, "item_type": null }, "searchText": { "type": "string", "initial": "", "required": false, "constraints": {}, "item_type": null }, "statusFilter": { "type": "string", "initial": "", "required": false, "constraints": {}, "item_type": null }, "branchFilter": { "type": "string", "initial": "", "required": false, "constraints": {}, "item_type": null }, "branches": { "type": "array", "initial": [], "required": false, "constraints": {}, "item_type": null }, "selectedMemberId": { "type": "string", "initial": "", "required": false, "constraints": {}, "item_type": null }, "selectedMemberDetail": { "type": "object", "initial": null, "required": false, "constraints": {}, "item_type": null }, "detailDrawerVisible": { "type": "boolean", "initial": false, "required": false, "constraints": {}, "item_type": null }, "editModalVisible": { "type": "boolean", "initial": false, "required": false, "constraints": {}, "item_type": null }, "editingMember": { "type": "object", "initial": null, "required": false, "constraints": {}, "item_type": null }, "memberLoans": { "type": "array", "initial": [], "required": false, "constraints": {}, "item_type": null }, "memberReservations": { "type": "array", "initial": [], "required": false, "constraints": {}, "item_type": null }, "memberFines": { "type": "array", "initial": [], "required": false, "constraints": {}, "item_type": null }, "pagination": { "type": "object", "initial": { "current": 1, "pageSize": 20, "total": 0 }, "required": false, "constraints": {}, "item_type": null } }, "derived": { "filteredMembersCount": { "type": "number", "expr": "state.pagination.total", "deps": [] } } }, "data_fetch_ir": { "endpoints": { "248c191744ad40d1af38db3447c3ff1e": { "endpoint_id": "248c191744ad40d1af38db3447c3ff1e", "module": "Authentication", "endpoint": "/auth/members", "method": "GET", "path_params": {}, "query_params": { "limit": "$state.pagination.pageSize", "offset": "($state.pagination.current - 1) * $state.pagination.pageSize", "membership_status": "$state.statusFilter", "library_branch_id": "$state.branchFilter" }, "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 }, "8a2193ca0aa74063ab41e7ea82c5c7f7": { "endpoint_id": "8a2193ca0aa74063ab41e7ea82c5c7f7", "module": "Library Branches", "endpoint": "/library-branches/", "method": "GET", "path_params": {}, "query_params": { "limit": 100, "offset": 0 }, "body": null, "fields": [ "id", "name", "address" ], "response_target": "branches", "response_transform": null, "trigger": "on_mount", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "0e9a76da2a6e418bacfcce50bf7512d8": { "endpoint_id": "0e9a76da2a6e418bacfcce50bf7512d8", "module": "Authentication", "endpoint": "/auth/members/{member_id}/details", "method": "GET", "path_params": { "member_id": "$state.selectedMemberId" }, "query_params": {}, "body": null, "fields": [ "id", "membership_number", "user", "library_branch" ], "response_target": "selectedMemberDetail", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "5e9b1cce916545b5aea044cd46cb7b40": { "endpoint_id": "5e9b1cce916545b5aea044cd46cb7b40", "module": "Circulation", "endpoint": "/loans/", "method": "GET", "path_params": {}, "query_params": { "member_id": "$state.selectedMemberId", "limit": 50, "offset": 0 }, "body": null, "fields": [ "id", "book_copy_id", "checkout_date", "due_date", "return_date", "status" ], "response_target": "memberLoans", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "00ecc4ce74bf4767867afef47ad9f8e6": { "endpoint_id": "00ecc4ce74bf4767867afef47ad9f8e6", "module": "Reservations", "endpoint": "/reservations/", "method": "GET", "path_params": {}, "query_params": { "member_id": "$state.selectedMemberId", "limit": 50, "offset": 0 }, "body": null, "fields": [ "id", "book_id", "reservation_date", "expiration_date", "status", "priority_order" ], "response_target": "memberReservations", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "c4cf5031b44540aba0a3697166429629": { "endpoint_id": "c4cf5031b44540aba0a3697166429629", "module": "Fines and Payments", "endpoint": "/fines/", "method": "GET", "path_params": {}, "query_params": { "member_id": "$state.selectedMemberId", "limit": 50, "offset": 0 }, "body": null, "fields": [ "id", "amount", "reason", "issue_date", "payment_status", "amount_paid" ], "response_target": "memberFines", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "a4d5d9165dd1428cbb63b15fbb02b4b5": { "endpoint_id": "a4d5d9165dd1428cbb63b15fbb02b4b5", "module": "Authentication", "endpoint": "/auth/members/{member_id}", "method": "PUT", "path_params": { "member_id": "$state.editingMember.id" }, "query_params": {}, "body": {}, "fields": [ "id", "membership_number", "user" ], "response_target": "updateMember_data", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "c1a0638b1e684bb8afd6f5721508acf1": { "endpoint_id": "c1a0638b1e684bb8afd6f5721508acf1", "module": "Authentication", "endpoint": "/auth/members/{member_id}", "method": "PUT", "path_params": { "member_id": "$action.memberId" }, "query_params": {}, "body": {}, "fields": [ "id", "membership_number", "user" ], "response_target": "c1a0638b1e684bb8afd6f5721508acf1_data", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "8275a05f4e8c4d5489a2f2976e6983c2": { "endpoint_id": "8275a05f4e8c4d5489a2f2976e6983c2", "module": "Authentication", "endpoint": "/auth/members/{member_id}", "method": "PUT", "path_params": { "member_id": "$action.memberId" }, "query_params": {}, "body": {}, "fields": [ "id", "membership_number", "user" ], "response_target": "8275a05f4e8c4d5489a2f2976e6983c2_data", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null }, "2fe5b8fddeb64911af10b332c1fe5c08": { "endpoint_id": "2fe5b8fddeb64911af10b332c1fe5c08", "module": "Authentication", "endpoint": "/auth/members/{member_id}", "method": "PUT", "path_params": { "member_id": "$action.memberId" }, "query_params": {}, "body": {}, "fields": [ "id", "membership_number", "user" ], "response_target": "2fe5b8fddeb64911af10b332c1fe5c08_data", "response_transform": null, "trigger": "manual", "depends_on": [], "debounce_ms": null, "loading_field": null, "error_field": null } } }, "data_model_ir": { "entities": { "member": { "name": "Member", "backend_module": "Authentication", "fields": [ "id", "membership_number", "user", "membership_status", "join_date", "date_of_birth", "address", "library_branch_id" ], "computed": [], "display_fields": [ "membership_number", "user", "membership_status", "join_date", "library_branch_id" ], "search_fields": [ "membership_number" ], "filters": [ "membership_status", "library_branch_id" ], "default_sort": null, "default_sort_dir": "asc" }, "member_detail": { "name": "MemberDetail", "backend_module": "Authentication", "fields": [ "id", "membership_number", "user", "library_branch", "membership_status", "join_date", "date_of_birth", "address" ], "computed": [], "display_fields": [ "membership_number", "user", "library_branch", "membership_status", "join_date", "date_of_birth", "address" ], "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", "return_date", "renewal_count", "status" ], "computed": [], "display_fields": [ "book_copy_id", "checkout_date", "due_date", "status" ], "search_fields": [], "filters": [ "member_id", "status" ], "default_sort": null, "default_sort_dir": "asc" }, "reservation": { "name": "Reservation", "backend_module": "Reservations", "fields": [ "id", "member_id", "book_id", "reservation_date", "expiration_date", "status", "priority_order" ], "computed": [], "display_fields": [ "book_id", "reservation_date", "status", "priority_order" ], "search_fields": [], "filters": [ "member_id", "status" ], "default_sort": null, "default_sort_dir": "asc" }, "fine": { "name": "Fine", "backend_module": "Fines and Payments", "fields": [ "id", "member_id", "loan_id", "amount", "reason", "issue_date", "payment_status", "amount_paid" ], "computed": [], "display_fields": [ "amount", "reason", "issue_date", "payment_status" ], "search_fields": [], "filters": [ "member_id", "payment_status" ], "default_sort": null, "default_sort_dir": "asc" }, "library_branch": { "name": "LibraryBranch", "backend_module": "Library Branches", "fields": [ "id", "name", "address" ], "computed": [], "display_fields": [ "name" ], "search_fields": [], "filters": [], "default_sort": null, "default_sort_dir": "asc" } }, "relationships": [] }, "behaviour_ir": { "events": { "onSearchChange": { "type": "mutation", "updates": [ { "target": "state.searchText", "expr": "event.target.value" } ], "description": "" }, "onStatusFilterChange": { "type": "mutation", "updates": [ { "target": "state.statusFilter", "expr": "value" }, { "target": "state.pagination.current", "expr": "1" } ], "description": "" }, "onBranchFilterChange": { "type": "mutation", "updates": [ { "target": "state.branchFilter", "expr": "value" }, { "target": "state.pagination.current", "expr": "1" } ], "description": "" }, "onPaginationChange": { "type": "mutation", "updates": [ { "target": "state.pagination.current", "expr": "page" }, { "target": "state.pagination.pageSize", "expr": "pageSize" } ], "description": "" }, "onDrawerClose": { "type": "mutation", "updates": [ { "target": "state.detailDrawerVisible", "expr": "false" }, { "target": "state.selectedMemberId", "expr": "''" }, { "target": "state.selectedMemberDetail", "expr": "null" } ], "description": "" }, "onEditModalClose": { "type": "mutation", "updates": [ { "target": "state.editModalVisible", "expr": "false" }, { "target": "state.editingMember", "expr": "null" } ], "description": "" } }, "actions": { "0a0886595b0b4e1c9aca90d41e6cefc0": { "action_id": "0a0886595b0b4e1c9aca90d41e6cefc0", "trigger": "input_change", "target_component_id": "search_input", "operation": "read", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.pagination.current", "expr": "1" } ], "api_endpoint": "248c191744ad40d1af38db3447c3ff1e", "api_body": null, "side_effects": [ { "type": "refresh", "config": { "target": "fetchMembers" } } ], "then": null, "catch": null, "data_action": null }, "65e6ee222c5d4d05ba3dcd1b690d37ed": { "action_id": "65e6ee222c5d4d05ba3dcd1b690d37ed", "trigger": "button_click", "target_component_id": "members_table", "operation": "read", "description": "", "payload": { "memberId": "$row.id" }, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.selectedMemberId", "expr": "$row.id" }, { "target": "state.detailDrawerVisible", "expr": "true" } ], "api_endpoint": "0e9a76da2a6e418bacfcce50bf7512d8", "api_body": null, "side_effects": [ { "type": "drawer_open", "config": { "drawer_id": "member_detail_drawer" } } ], "then": null, "catch": null, "data_action": null }, "50b956da63c540269e223612a7aaaaa3": { "action_id": "50b956da63c540269e223612a7aaaaa3", "trigger": "button_click", "target_component_id": "members_table", "operation": "read", "description": "", "payload": { "member": "$row" }, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [ { "target": "state.editingMember", "expr": "$row" }, { "target": "state.editModalVisible", "expr": "true" } ], "api_endpoint": null, "api_body": null, "side_effects": [ { "type": "modal_open", "config": { "modal_id": "edit_member_modal" } } ], "then": null, "catch": null, "data_action": null }, "2e807df7d86d453293081007d815896c": { "action_id": "2e807df7d86d453293081007d815896c", "trigger": "form_submit", "target_component_id": "edit_member_form", "operation": "update", "description": "", "payload": {}, "guard": null, "requires_confirmation": false, "confirmation_message": null, "validation_rules": [ { "rule_id": "val_0", "field": null, "type": "custom", "value": null, "expression": "{\"field\": \"membership_number\", \"message\": \"Membership number is required\", \"rule_id\": \"val_membership_number\", \"type\": \"required\"}", "message": "{\"field\": \"membership_number\", \"message\": \"Membership number is required\", \"rule_id\": \"val_membership_number\", \"type\": \"required\"}" } ], "validation_messages": {}, "updates": [ { "target": "state.editModalVisible", "expr": "false" } ], "api_endpoint": "a4d5d9165dd1428cbb63b15fbb02b4b5", "api_body": null, "side_effects": [ { "type": "toast", "config": { "message": "Member updated successfully", "type": "success" } }, { "type": "modal_close", "config": { "modal_id": "edit_member_modal" } }, { "type": "refresh", "config": { "target": "fetchMembers" } } ], "then": null, "catch": null, "data_action": null }, "c1a0638b1e684bb8afd6f5721508acf1": { "action_id": "c1a0638b1e684bb8afd6f5721508acf1", "trigger": "button_click", "target_component_id": "members_table", "operation": "update", "description": "", "payload": { "memberId": "$row.id" }, "guard": null, "requires_confirmation": true, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [], "api_endpoint": "c1a0638b1e684bb8afd6f5721508acf1", "api_body": null, "side_effects": [ { "type": "toast", "config": { "message": "Member approved successfully", "type": "success" } }, { "type": "refresh", "config": { "target": "fetchMembers" } } ], "then": null, "catch": null, "data_action": null }, "8275a05f4e8c4d5489a2f2976e6983c2": { "action_id": "8275a05f4e8c4d5489a2f2976e6983c2", "trigger": "button_click", "target_component_id": "members_table", "operation": "update", "description": "", "payload": { "memberId": "$row.id" }, "guard": null, "requires_confirmation": true, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [], "api_endpoint": "8275a05f4e8c4d5489a2f2976e6983c2", "api_body": null, "side_effects": [ { "type": "toast", "config": { "message": "Member suspended", "type": "warning" } }, { "type": "refresh", "config": { "target": "fetchMembers" } } ], "then": null, "catch": null, "data_action": null }, "2fe5b8fddeb64911af10b332c1fe5c08": { "action_id": "2fe5b8fddeb64911af10b332c1fe5c08", "trigger": "button_click", "target_component_id": "members_table", "operation": "update", "description": "", "payload": { "memberId": "$row.id" }, "guard": null, "requires_confirmation": true, "confirmation_message": null, "validation_rules": [], "validation_messages": {}, "updates": [], "api_endpoint": "2fe5b8fddeb64911af10b332c1fe5c08", "api_body": null, "side_effects": [ { "type": "toast", "config": { "message": "Member activated successfully", "type": "success" } }, { "type": "refresh", "config": { "target": "fetchMembers" } } ], "then": null, "catch": null, "data_action": null }, "522992a98efd4e6fb0e6ccf26074ccff": { "action_id": "522992a98efd4e6fb0e6ccf26074ccff", "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": { "0a0886595b0b4e1c9aca90d41e6cefc0": { "action_id": "0a0886595b0b4e1c9aca90d41e6cefc0", "loading_indicator": "spinner", "loading_text": null, "success_message": null, "error_message": "Failed to load members", "ui_updates": [] }, "65e6ee222c5d4d05ba3dcd1b690d37ed": { "action_id": "65e6ee222c5d4d05ba3dcd1b690d37ed", "loading_indicator": "spinner", "loading_text": null, "success_message": null, "error_message": "Failed to load member details", "ui_updates": [] }, "2e807df7d86d453293081007d815896c": { "action_id": "2e807df7d86d453293081007d815896c", "loading_indicator": "spinner", "loading_text": null, "success_message": "Member updated successfully", "error_message": "Failed to update member", "ui_updates": [] }, "c1a0638b1e684bb8afd6f5721508acf1": { "action_id": "c1a0638b1e684bb8afd6f5721508acf1", "loading_indicator": "spinner", "loading_text": null, "success_message": "Member approved successfully", "error_message": "Failed to approve member", "ui_updates": [] }, "8275a05f4e8c4d5489a2f2976e6983c2": { "action_id": "8275a05f4e8c4d5489a2f2976e6983c2", "loading_indicator": "spinner", "loading_text": null, "success_message": "Member suspended", "error_message": "Failed to suspend member", "ui_updates": [] }, "2fe5b8fddeb64911af10b332c1fe5c08": { "action_id": "2fe5b8fddeb64911af10b332c1fe5c08", "loading_indicator": "spinner", "loading_text": null, "success_message": "Member activated", "error_message": "Failed to activate member", "ui_updates": [] }, "522992a98efd4e6fb0e6ccf26074ccff": { "action_id": "522992a98efd4e6fb0e6ccf26074ccff", "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": "12px" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "back_button": { "type": "Button", "label": "Back", "description": null, "bind": null, "onClick": "navigateBack", "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "icon": "ArrowLeftOutlined", "type": "text" }, "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": "Member Management", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "level": 3 }, "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 }, "filters_section": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "bordered": false }, "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 }, "filters_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "gap": "16px", "flexWrap": "wrap", "alignItems": "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 }, "search_input": { "type": "Input.Search", "label": "Search members", "description": null, "bind": "state.searchText", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "placeholder": "Search by name, email, phone, or membership #", "allowClear": true, "style": { "width": 360 } }, "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 }, "status_filter": { "type": "Select", "label": "Status", "description": null, "bind": "state.statusFilter", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "placeholder": "Filter by Status", "allowClear": true, "style": { "width": 180 }, "options": [ { "label": "Active", "value": "ACTIVE" }, { "label": "Suspended", "value": "SUSPENDED" }, { "label": "Expired", "value": "EXPIRED" }, { "label": "Cancelled", "value": "CANCELLED" } ] }, "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 }, "branch_filter": { "type": "Select", "label": "Branch", "description": null, "bind": "state.branchFilter", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "placeholder": "Filter by Branch", "allowClear": true, "style": { "width": 200 }, "options": "state.branches.map(b => ({ label: b.name, value: b.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 }, "table_card": { "type": "Card", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "bordered": false }, "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 }, "members_table": { "type": "Table", "label": "Members Table", "description": null, "bind": "state.members", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "rowKey": "id", "loading": "state.membersLoading", "pagination": { "current": "state.pagination.current", "pageSize": "state.pagination.pageSize", "total": "state.pagination.total", "showSizeChanger": true, "showTotal": true }, "columns": [ { "title": "Membership #", "dataIndex": "membership_number", "key": "membership_number", "width": 140 }, { "title": "Full Name", "dataIndex": [ "user", "first_name" ], "key": "full_name", "render": "record.user.first_name + ' ' + record.user.last_name" }, { "title": "Email", "dataIndex": [ "user", "email" ], "key": "email" }, { "title": "Phone", "dataIndex": [ "user", "phone" ], "key": "phone" }, { "title": "Join Date", "dataIndex": "join_date", "key": "join_date" }, { "title": "Status", "dataIndex": "membership_status", "key": "membership_status", "render": "tag" }, { "title": "Outstanding Fines", "dataIndex": "outstanding_fines", "key": "outstanding_fines" }, { "title": "Actions", "key": "actions", "render": "actions" } ] }, "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 }, "member_detail_drawer": { "type": "Drawer", "label": "Member Details", "description": null, "bind": "state.detailDrawerVisible", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Member Details", "width": 720, "placement": "right" }, "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 }, "drawer_content": { "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": "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 }, "member_profile_section": { "type": "Descriptions", "label": "Profile Information", "description": null, "bind": "state.selectedMemberDetail", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Profile Information", "bordered": true, "column": 2, "items": [ { "label": "Membership #", "field": "membership_number" }, { "label": "Status", "field": "membership_status" }, { "label": "Full Name", "field": "user.first_name + ' ' + user.last_name" }, { "label": "Email", "field": "user.email" }, { "label": "Phone", "field": "user.phone" }, { "label": "Date of Birth", "field": "date_of_birth" }, { "label": "Address", "field": "address" }, { "label": "Branch", "field": "library_branch.name" }, { "label": "Join Date", "field": "join_date" } ] }, "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 }, "member_loans_table": { "type": "Table", "label": "Current Loans", "description": null, "bind": "state.memberLoans", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Current Loans", "rowKey": "id", "size": "small", "pagination": { "pageSize": 5 }, "columns": [ { "title": "Book Copy", "dataIndex": "book_copy_id", "key": "book_copy_id" }, { "title": "Checkout Date", "dataIndex": "checkout_date", "key": "checkout_date" }, { "title": "Due Date", "dataIndex": "due_date", "key": "due_date" }, { "title": "Status", "dataIndex": "status", "key": "status", "render": "tag" } ] }, "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 }, "member_reservations_table": { "type": "Table", "label": "Reservations", "description": null, "bind": "state.memberReservations", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Reservations", "rowKey": "id", "size": "small", "pagination": { "pageSize": 5 }, "columns": [ { "title": "Book", "dataIndex": "book_id", "key": "book_id" }, { "title": "Reserved Date", "dataIndex": "reservation_date", "key": "reservation_date" }, { "title": "Expiration", "dataIndex": "expiration_date", "key": "expiration_date" }, { "title": "Status", "dataIndex": "status", "key": "status", "render": "tag" }, { "title": "Queue Position", "dataIndex": "priority_order", "key": "priority_order" } ] }, "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 }, "member_fines_table": { "type": "Table", "label": "Fine History", "description": null, "bind": "state.memberFines", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Fine History", "rowKey": "id", "size": "small", "pagination": { "pageSize": 5 }, "columns": [ { "title": "Amount", "dataIndex": "amount", "key": "amount", "render": "currency" }, { "title": "Reason", "dataIndex": "reason", "key": "reason" }, { "title": "Issue Date", "dataIndex": "issue_date", "key": "issue_date" }, { "title": "Payment Status", "dataIndex": "payment_status", "key": "payment_status", "render": "tag" }, { "title": "Amount Paid", "dataIndex": "amount_paid", "key": "amount_paid", "render": "currency" } ] }, "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 }, "borrowing_statistics": { "type": "Card", "label": "Borrowing Statistics", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Borrowing Statistics", "size": "small" }, "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 }, "stats_row": { "type": "div", "label": null, "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": {}, "dynamic_props": {}, "styles": { "display": "flex", "gap": "24px", "flexWrap": "wrap" }, "dynamic_styles": {}, "class_name": null, "dynamic_class": null, "transitions": [], "visible_when": null, "disabled_when": null, "repeat": null, "slots": {}, "a11y_role": null, "a11y_label": null }, "stat_active_loans": { "type": "Statistic", "label": "Active Loans", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Active Loans", "value": "state.memberLoans.filter(l => l.status === 'ACTIVE').length" }, "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 }, "stat_total_loans": { "type": "Statistic", "label": "Total Loans", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Total Loans", "value": "state.memberLoans.length" }, "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 }, "stat_active_reservations": { "type": "Statistic", "label": "Active Reservations", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Active Reservations", "value": "state.memberReservations.filter(r => r.status === 'PENDING' || r.status === 'READY').length" }, "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 }, "stat_outstanding_fines": { "type": "Statistic", "label": "Outstanding Fines", "description": null, "bind": null, "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Outstanding Fines", "value": "state.memberFines.filter(f => f.payment_status === 'UNPAID').reduce((sum, f) => sum + f.amount, 0)", "prefix": "$" }, "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 }, "edit_member_modal": { "type": "Modal", "label": "Edit Member", "description": null, "bind": "state.editModalVisible", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "title": "Edit Member", "width": 640, "okText": "Save Changes", "cancelText": "Cancel" }, "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 }, "edit_member_form": { "type": "Form", "label": "Edit Member Form", "description": null, "bind": "state.editingMember", "onClick": null, "onChange": null, "onSubmit": null, "onHover": null, "onKeyPress": null, "props": { "layout": "vertical", "fields": [ { "name": "membership_number", "label": "Membership Number", "type": "input", "rules": [ { "required": true, "message": "Membership number is required" } ] }, { "name": "membership_status", "label": "Status", "type": "select", "options": [ { "label": "Active", "value": "ACTIVE" }, { "label": "Suspended", "value": "SUSPENDED" }, { "label": "Expired", "value": "EXPIRED" }, { "label": "Cancelled", "value": "CANCELLED" } ] }, { "name": "date_of_birth", "label": "Date of Birth", "type": "datepicker" }, { "name": "address", "label": "Address", "type": "textarea" }, { "name": "library_branch_id", "label": "Library Branch", "type": "select", "options": "state.branches.map(b => ({ label: b.name, value: b.id }))" }, { "name": "join_date", "label": "Join Date", "type": "datepicker" } ] }, "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", "filters_section", "table_card", "member_detail_drawer", "edit_member_modal" ], "page_header": [ "header_left" ], "header_left": [ "back_button", "page_title" ], "filters_section": [ "filters_row" ], "filters_row": [ "search_input", "status_filter", "branch_filter" ], "table_card": [ "members_table" ], "member_detail_drawer": [ "drawer_content" ], "drawer_content": [ "member_profile_section", "borrowing_statistics", "member_loans_table", "member_reservations_table", "member_fines_table" ], "borrowing_statistics": [ "stats_row" ], "stats_row": [ "stat_active_loans", "stat_total_loans", "stat_active_reservations", "stat_outstanding_fines" ], "edit_member_modal": [ "edit_member_form" ] }, "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": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "header_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 }, "filters_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 }, "filters_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 }, "table_card": { "type": "vertical", "gap": 0, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "member_detail_drawer": { "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 }, "drawer_content": { "type": "vertical", "gap": 24, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "borrowing_statistics": { "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 }, "stats_row": { "type": "horizontal", "gap": 24, "padding": null, "columns": null, "column_template": null, "row_template": null, "align_items": null, "justify_content": null, "wrap": false, "min_height": null, "overflow": null }, "edit_member_modal": { "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_zone", "component": "main_container", "anchor": "top-left", "size_hint": "full-width", "z_layer": "base", "notes": "Main page container" }, { "zone_id": "drawer_zone", "component": "member_detail_drawer", "anchor": "center", "size_hint": "auto", "z_layer": "overlay", "notes": "Member detail drawer overlay" }, { "zone_id": "modal_zone", "component": "edit_member_modal", "anchor": "center", "size_hint": "auto", "z_layer": "overlay", "notes": "Edit member modal overlay" } ], "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 }